Automatically disable a button once there’s no associated element left
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I have a list with several elements, and some controlling buttons that can hide/show these elements. Some buttons have control over just one element, while others have multiple elements. Do you maybe know how can I gray out a button automatically when all of its associated elements are already hidden by other buttons? For example:
Button01 hides/shows ElementX and ElementY,
Button02 hides/shows only ElementY.
What I want to do is, graying out Button02 automatically once ElementY is hidden by the other button.
for (let button of document.querySelectorAll(“.filterbutton”)) {
button.addEventListener(“click”, filter);
}
button.addEventListener(“click”, filter);
}
let filters = new Set;
function toggleDisplay(selector, display) {
let elems = document.querySelectorAll(selector);
for (let elem of elems) {
elem.style.display = display;
}
}
function filter() {
let filterSelector = this.dataset.filter;
let show = filters.delete(filterSelector);
this.style.color = show ? “” : “rgb(200,200,200)”;
if (!show) {
filters.add(filterSelector); // toggle this filter
} else {
toggleDisplay(filterSelector, “”);
}
if (filters.size) {
toggleDisplay([…filters].join(“,”), “none”);
}
}
<div class=”filterbutton” data-filter=”.filter01″>Filter01</div>
<div class=”filterbutton” data-filter=”.filter02″>Filter02</div>
<div class=”filter01″>ElementX</div>
<div class=”filter01 filter02″>ElementY</div>
أضف إجابة