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基本上是将显示样式改为阻止，所以我不知道为什么我必须像这样拼写出来。有什么想法吗？

Answer 1

您可以将代码简化为

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

将触发元素的可见性，但这可能无法解决您的问题，它可能与您首先隐藏div的方式有关。尝试将其更改为.hide（），而不是手动设置css。有几种方法可以隐藏元素。显示只返回其中一个（与hide（）相同）

Answer 2

show在fiddle中适合我。你确定你的条件得到满足吗？尝试在alert('conditions met');内投放if以查看其是否被触发。

Answer 3

考虑分配aria-hidden属性，然后使用jQuery隐藏您为屏幕阅读器指定为隐藏的任何内容。

代码：

<button type="button" id="my-button" onclick="...do something" aria-hidden="true">Go</button>

JavaScript的：

$('[aria-hidden="true"]').hide(); //hide anything that's marked as hidden to screen-readers

然后使用.hide（）和.show（），以及aria-hidden属性的切换。

查看working example at http://jsfiddle.net/jhfrench/4kNPF/

为什么JQuery显示/隐藏按钮而不是div？

3 个答案: