Question

因此，我目前正在尝试基于html中的'true'或'false'元素隐藏按钮。但是我总共显示了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是true或false值。

我有一个名为data-charid的ID，该ID一直到5。只有第一个隐藏按钮。

有什么建议吗？抱歉，如果不清楚，请尝试使用js。

Answer 1

您需要选择上面具有data-ischar元素的元素，然后从中获取属性。现在，您正在要求jquery本身获取html属性，但根本不获取任何内容。

<div id="my-element" data-ischar="true"></div>

if ($("#my-element").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");
};

但是，我们可以简化一下代码！ jQuery的.hide()是设置.css('display', 'none')的快捷方式，而.show()是.css('display', 'block')的快捷方式

您还可以一次选择一个以上的元素，这在您想要对多个元素进行相同操作的情况下很有用。

if ($("#my-element").attr("data-ischar") === "true") {
    $("#join, #delete").show()
    $("#create").hide();
} else {
    $("#join, #delete").hide()
    $("#create").show();
};

或者，甚至更好的是，您可以使用.toggle()并传入一个布尔值以显示/隐藏该元素。

var isChar = $("#my-element").attr("data-ischar") === "true";
$("#join, #delete").toggle(isChar)
$("#create").toggle(!isChar);

最后，就像@Deepak指出的那样，通过添加/删除CSS类来隐藏/显示元素可能是一个更好的主意。为此.toggleClass()！

.hidden { display: none; }

var isChar = $("#my-element").attr("data-ischar") === "true";
$("#join, #delete").toggleClass('hidden', isChar)
$("#create").toggleClass('hidden', !isChar);

Answer 2

外观应由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>

如何基于许多其他元素隐藏元素

2 个答案: