Toggleclass для нескольких разделенных идентификаторов / классов в Jquery + Jquery-Mobile

Question

Дамы и господа,

У меня есть один маленький вопрос к функции toggleclass библиотеки Jquery. В настоящее время я работаю над мобильным приложением jquery со списками и статьями контента. В этой статье я хочу реализовать "ночной режим". После прикосновения к кнопке ночного режима в каждой статье того же класса, но с другим идентификатором!! должен переключить свой класс.

Я покажу вам мою статью html-структуру, мой 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> 

Есть ли возможность не делать разные кнопки для каждой статьи? Я хочу переключать класс в каждой статье (в более чем одном идентификаторе статьи), просто нажав / нажав одну кнопку с одним идентификатором.

Является ли это возможным?

С наилучшими пожеланиями и большое спасибо!!!

Answer 1

Вместо идентификатора на кнопках ночного режима назначьте им всем один и тот же класс, например:

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

Затем добавьте обработчик кликов для этого класса, чтобы при нажатии любой из кнопок ночного режима выполнялся тот же код:

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

В обработчике переключите ночной класс на все статьи, используя $('[data-role="page"]') селектор. Предполагая, что все ваши статьи находятся на странице, как ваш пример кода, они все будут обновлены.

DEMO

Если вы вводите статьи динамически, вам нужно сохранить текущий режим и установить класс для входящей страницы.