javascript - 为什么 JQuery 显示/隐藏适用于按钮而不适用于 div？

Question

我想根据条件切换按钮和 div 的显示或隐藏。目前，JQuery hide 适用于 button() 但 show() 不适用于 div。换句话说，在下面的javascript中，如果满足条件，则隐藏按钮但不显示div。

html:

<button type="button" id="my-button" onclick="...do something">Go</button>
<div id="my-text">Please send an email to help@mycompany.com</div>

CSS:

#my-text{
    display: none;
}

JavaScript:

<script type="text/javascript">
    (function() {
        $(document).ready(function() {
            var someConditionIsMet = //...compute something
            if (someConditionIsMet) {
                $('#my-button').hide();
                $('#my-text').show();
            }
        });
    })();
</script>

但是如果我把它改成

            if (someConditionIsMet) {
                $('#my-button').hide();
                $('#my-text').attr("style", "display:block")
            }

然后它就可以正常工作了。我认为 show 基本上是将显示样式更改为 block，所以我不确定为什么必须这样拼写。有什么想法吗？

Answer 1

你可以稍微简化你的代码

$('#my-button, #my-text').toggle();

这将改变元素的可见性，但是这可能无法解决您的问题，它很可能与您首先隐藏 div 的方式有关。尝试将其更改为 .hide() 而不是手动设置 css。有几种隐藏元素的方法。show 仅恢复其中一种(与 hide() 相同)