У меня проблемы с объединением действий при нажатии кнопки в javascript, я хотел бы отфильтровать скрытые дивы в соответствии с кликом пользователя.
- это два фильтра день и статус
если он нажимает на день, он может сопоставить статус, состоящий в том, что есть пять кнопок для дней и пять различных состояний, которые могут быть объединены между ними
так, как мне удалось скрыть дивиденды, только когда я нажимаю на статус конфликта.
Пример:
нажмите кнопку «Видимость семана» в фильтре 1 Результат = ОК, нет 2
после нажатия на «видимость нет» в фильтре 2 Результат = нормально, нет
правильное значение будет Результат = нет 2
<div> <h1>Filter 1 </h1>
<button id="btnhoje" class="btn btn-fill btn-rose _btn-visible">
<i class="material-icons icon">visibility</i>
<span>Hoje</span>
</button>
<button id="btnsemana" class="btn btn-fill btn-rose _btn-visible">
<i class="material-icons icon">visibility</i>
<span>Semana</span>
</button>
</div>
<div> <h1>Filter 2 </h1>
<button id="btnok" class="btn btn-fill btn-rose _btn-visible">
<i class="material-icons icon">visibility</i>
<span>ok</span>
</button>
<button id="btnno" class="btn btn-fill btn-rose _btn-visible">
<i class="material-icons icon">visibility</i>
<span>no</span>
</button>
</div>
<div> <h1>Result </h1>
<div class="hoje ok">ok</div>
<div class="semana no">no</div>
<div class="hoje no">no 2</div>
</div>
$(document).ready(function () {
$("#btnhoje").on("click", function ( eve ) {
$(".hoje").toggle("slow");
let b_isVisible = this.classList.contains("_btn-hoje")
, s_buttontext
, s_text
;
if (b_isVisible) {
s_text = 'visibility';
this.classList.remove("_btn-hoje");
} else {
s_text = 'visibility_off';
this.classList.add("_btn-hoje");
}
// $("span", this).text(s_buttontext);
$("i", this).text(s_text);
$(this).val(s_buttontext);
});
});
$(document).ready(function () {
$("#btnsemana").on("click", function ( eve ) {
$(".semana").toggle("slow");
let b_isVisible = this.classList.contains("_btn-semana")
, s_buttontext
, s_text
;
if (b_isVisible) {
s_text = 'visibility';
this.classList.remove("_btn-semana");
} else {
s_text = 'visibility_off';
this.classList.add("_btn-semana");
}
// $("span", this).text(s_buttontext);
$("i", this).text(s_text);
$(this).val(s_buttontext);
});
});
$(document).ready(function () {
$("#btnok").on("click", function ( eve ) {
$(".ok").toggle("slow");
let b_isVisible = this.classList.contains("_btn-ok")
, s_buttontext
, s_text
;
if (b_isVisible) {
// s_buttontext = 'Hoje';
s_text = 'visibility';
this.classList.remove("_btn-ok");
} else {
// s_buttontext = 'Hoje';
s_text = 'visibility_off';
this.classList.add("_btn-ok");
}
// $("span", this).text(s_buttontext);
$("i", this).text(s_text);
$(this).val(s_buttontext);
});
});
$(document).ready(function () {
$("#btnno").on("click", function ( eve ) {
$(".no").toggle("slow");
let b_isVisible = this.classList.contains("_btn-no")
, s_buttontext
, s_text
;
if (b_isVisible) {
// s_buttontext = 'Hoje';
s_text = 'visibility';
this.classList.remove("_btn-no");
} else {
// s_buttontext = 'Hoje';
s_text = 'visibility_off';
this.classList.add("_btn-no");
}
// $("span", this).text(s_buttontext);
$("i", this).text(s_text);
$(this).val(s_buttontext);
});
});
https://jsfiddle.net/queiroz_gabriel/s0o297dp/8/