Question

亲爱的女士们，先生们，

我对Jquery库的toggleclass函数有一个小问题。我目前正在开发一个包含列表和内容文章的jquery-mobile应用程序。在这篇文章中，我想实现一个“夜间模式”。每个文章触摸夜间模式按钮后，具有相同的类但不同的ID！应该切换它的类。

我将向您展示我的文章html-structure，我的css和我的jquery脚本。

所以这是我的代码结构：

$(document).ready(function(){

$('#nightmode_article1').click(function(){
    $('#article1').toggleClass('night');
});

$('#nightmode_article2').click(function(){
    $('#article2').toggleClass('night');
});



});

 .day {
		background-image: url(images/background.jpg);
	background-repeat:repeat;       
	   text-align: center;
}

.night {
	background-image: url(images/background-night.jpg);
	background-repeat:repeat;      
	text-align: center;
	color: #F0F0F0;
	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的按钮来切换每篇文章中的课程（在一篇文章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

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

在Jquery + Jquery-Mobile中的几个div id /类上的Toggleclass

1 个答案: