javascript - 如何根据许多其他元素隐藏一个元素

Question

所以我目前正在尝试隐藏基于 html 中“真”或“假”元素的按钮。但是我总共显示了 5 个 CSS 块。每个都有这些按钮。它只隐藏第一个块上的按钮。我总共有 5 个块。

            if ($.attr("data-ischar") === "true") {
                $("#join").css({"display":"block"});
                $("#delete").css({"display":"block"});
                $("#create").css({"display":"none"});
            } else {
                $("#join").css({"display":"none"});
                $("#delete").css({"display":"none"});
                $("#create").css({"display":"block"});
            };

是我的代码，

data-ischar是真值还是假值。

我有一个 id 叫做data-charid 那个 = 一直到 5。只有第一个隐藏了按钮。

有什么建议么？抱歉，如果不清楚，js 新手。

标签： javascriptjquery

Answer 1

外观样式用css，状态管理用js。

p = document.querySelector("p")
cts = document.querySelector(".controls")
ctr = document.querySelector("#controller")

ctr.addEventListener('click', e => {
  status = p.dataset.ischar === 'true' ? 'false' : 'true'
  // JS control the data attribute
  p.dataset.ischar = status
  p.innerText = `Char status: ${status}`
  // we toggle the class based on attribute change event.
  cts.classList.toggle('hide')
})

#controls button {
display: block;
}

.controls.hide button {
display: none;
}

<div>
<button id="controller">Control the char status</button>
<div>

<p data-ischar="true">Char status: true</p>
<div class="controls" class="hide">
<button>first Join</button>
<button>Create</button>
<button>Delete</button>
</div>
<div class="controls" class="hide">
<button>Second Join</button>
<button>Create</button>
<button>Delete</button>
</div>
<div class="controls" class="hide">
<button>third Join</button>
<button>Create</button>
<button>Delete</button>
</div>
<div class="controls" class="hide">
<button>Join</button>
<button>Create</button>
<button>Delete</button>
</div>
<div class="controls" class="hide">
<button>Join</button>
<button>Create</button>
<button>Delete</button>
</div>
<div class="controls" class="hide">
<button>Join</button>
<button>Create</button>
<button>Delete</button>
</div>
<div class="controls" class="hide">
<button>Join</button>
<button>Create</button>
<button>Delete</button>
</div>
<div class="controls" class="hide">
<button>Join</button>
<button>Create</button>
<button>Delete</button>
</div>
<div class="controls" class="hide">
<button>Join</button>
<button>Create</button>
<button>Delete</button>
</div>