Question

以下HTML和JavaScript按预期工作，但我想确保我正确使用它。

我有两个div，但只需要显示一个div，具体取决于mode的值。

HTML：

<body>
        <div id="a-div" style="display: none;">
            <button id="add" class="btnstyle">Add </button>
        </div>
        <div id="d-div" style="display: none;">
            <button id="delete" class="btnstyle">Delete</button>
        </div>
</body>

JS：

//$("#a-div").hide();
//$("#d-div").hide();

var mode = 'add';
//var mode = 'delete';
if (mode === 'add') {
    $("#a-div").show();
} else {
    $("#d-div").show();
}

这给了我预期的结果。有没有更好的方法来反转style="display: none"属性？

Answer 1

您当前的代码应该可以正常工作，但有很多方法可以解决此问题。我建议使用jQuerys toggle()：

z-index

或者，您可以为其提供ID $("#a-div").toggle(mode === "add"); $("#a-div").toggle(mode === "delete");和add-div，并将其中一个显示为：

delete-div

Answer 2

您可以使用：

$("#a-div").toggle();

可替换地;
.show() / .hide()
.fadeIn() / fadeOut()

Answer 3

您需要修改内联样式属性的显示属性。

喜欢这个......

var mode = 'add';

if (mode === 'add') {
    $("#a-div")[0].style.display = 'block';
} else {
    $("#d-div")[0].style.display = 'block';
}

或者您可以使用inherit而不是block。

Answer 4

有几种方法可以做到这一点（就像你在其他答案中看到的那样），但我认为show()功能就足够了，并且可以在你的情况下完成工作。

你也可以使用JQuery的css()方法，如下所示：

$("#a-div").css('display','block');

希望这有帮助。

Answer 5

另一个选择是将样式移动到css：

HTML：

    <div id="a-div" class="notdisplayed">
        <button id="add" class="btnstyle">Add </button>
    </div>
    <div id="d-div" class="notdisplayed">
        <button id="delete" class="btnstyle">Delete</button>
    </div>

的CSS：

.notDisplayed {display:none;}

脚本：

$("#a-div").addClass("notDisplayed");
$("#d-div").removeClass("notDisplayed");

此方法比show / hide更通用，因为它可以扩展到任何样式规则。

使用JS显示“display：none”隐藏的div？

5 个答案: