Toggleclass几个div编号/班jQuery的+ jQuery的移动

Question

尊敬的女士们，先生们，

我有对jQuery库的toggleclass功能一个豆蔻问题。我目前正在研究一个带有列表和内容文章的jquery-mobile应用程序。在这篇文章中我想实现一个“夜间模式”。每篇文章触摸夜间按钮后，与同一班，但!!不同的ID！应该切换其类。

我会告诉你我的文章html结构，我的CSS和我的jquery脚本。

所以这是我的代码结构：

$(document).ready(function(){ 
 

 
$('#nightmode_article1').click(function(){ 
 
    $('#article1').toggleClass('night'); 
 
}); 
 

 
$('#nightmode_article2').click(function(){ 
 
    $('#article2').toggleClass('night'); 
 
}); 
 

 

 

 
});

.day { 
 
\t \t background-image: url(images/background.jpg); 
 
\t background-repeat:repeat;  
 
\t text-align: center; 
 
} 
 

 
.night { 
 
\t background-image: url(images/background-night.jpg); 
 
\t background-repeat:repeat;  
 
\t text-align: center; 
 
\t color: #F0F0F0; 
 
\t text-shadow: none; 
 
}

<div data-role="page" id="article1" class="day"> 
 
    <header data-role="header"> 
 
    <button id="nightmode_article1"><img src="images/night-icon.png" /></button> 
 
    <h1>Article1</h1> 
 
    </header> 
 
    <article data-role="content"> 
 

 
    </article> 
 
    <footer data-role="footer" data-position="fixed"> 
 
    <nav data-role="navbar"> 
 
    <ul> 
 
    <li><a href="#" data-icon="home">Home</a></li> 
 
    <li><a href="#" data-icon="back">Test</a></li> 
 
    </ul> 
 
    </nav> 
 
    </footer> 
 
    </div> 
 

 
    <div data-role="page" id="article2" class="day"> 
 
    <header data-role="header"> 
 
    <button id="nightmode_article2"><img src="images/night-icon.png" /></button> 
 
    <h1>Article1</h1> 
 
    </header> 
 
    <article data-role="content"> 
 

 
    </article> 
 
    <footer data-role="footer" data-position="fixed"> 
 
    <nav data-role="navbar"> 
 
    <ul> 
 
    <li><a href="#" data-icon="home">Home</a></li> 
 
    <li><a href="#" data-icon="back">Test</a></li> 
 
    </ul> 
 
    </nav> 
 
    </footer> 
 
    </div>

是否有可能不使不同的按钮为每篇文章？我想在每篇文章中切换课程（只有一篇文章ID），只需触摸/按一个按钮即可。

可能吗？

最好的问候和许多很多谢谢！

Answer 1

而是在夜间模式按钮的ID，将所有他们的同类的，如：

<button class="nightModeButton"><img src="images/night-icon.png" /></button> 

然后添加一个单击处理该类所以点击任何夜间模式按钮的运行相同代码：

$('.nightModeButton').click(function(){ 
    $('[data-role="page"]').toggleClass('night'); 
}); 

在处理程序中，通过使用$('[data-role="page"]')选择切换上的所有文章的夜校。假设你的所有文章都在你的示例代码的页面内，它们都将被更新。

DEMO

如果你是动态注入的文章，你需要保存当前模式，并设置类传入页面。