Кнопка не разделяет действие между вкладками - PullRequest
Новая
       18

Кнопка не разделяет действие между вкладками

0 голосов
/ 01 сентября 2018

Я использую инфраструктуру пользовательского интерфейса Onsen. У меня есть приложение HTML, которое содержит 3 вкладки (tab1, tab2 и tab3). Весь код находится в одном файле HTML. На вкладке 1 у меня есть кнопка, которая при включении h2 меняет цвет. Это изменение сделано только на вкладке 1, но я хочу изменить все три вкладки.

По сути, это идея:

HTML 

  <template id="tab1.html">
      <ons-page id="tab1">
        <!-- This is the button --> <ons-switch id="nightmode"></ons-switch>
      </ons-page id="tab1">
      <h2 class="title">Home</h2>
  </template id="tab1.html">

  <template id="tab2.html">
      <ons-page id="tab2">
          <h2 class="title">Home</h2><!-- It shall change colour, but it does not -->
      </ons-page id="tab2">
  </template id="tab2.html">

  <template id="tab3.html">
      <ons-page id="tab3">
       <h2 class="title">Home</h2><!-- It shall change colour, but it does not -->
      </ons-page id="tab3">
 </template id="tab3.html">

JS 

<script>
document.getElementById("nightmode").addEventListener("change", function() {
  if (document.getElementById("nightmode").checked == true) {
    document.getElementsByClassName("title")[0].setAttribute("style", "color: white;");

  } else {
    document.getElementsByClassName("title")[0].setAttribute("style", "color: black;");
  }
});
</script>

1 Ответ

0 голосов
/ 01 сентября 2018 
document.getElementsByClassName("title")[0].setAttribute("style", "color: black;");

Этот код изменяет только первый элемент из-за [0]. Вы можете изменить все элементы с помощью этого кода; 

document.getElementById("nightmode").addEventListener("change", function() {
  var elms = document.getElementsByClassName("title");

  var textcolor = "white";
  if(document.getElementById("nightmode").checked)
     textcolor = "black";

  for(var i in elms){
     var elm = elms[i];
     elm.style.color = textcolor;
  }
});

Также я предлагаю использовать jQuery. С jQuery это может быть проще; 

$("#nightmode").change(function() {
    if(this.checked)
        $("h2.title").css("color", "white");
    else
        $("h2.title").css("color", "black");
}
...