Кнопка не разделяет действие между вкладками
Я использую пользовательский интерфейс 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 ответ
Решение
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");
}