0

我想根据条件切换按钮和 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 基本上是将显示样式更改为阻止，所以我不确定为什么我必须这样拼写出来。任何想法为什么？

4

3 回答 3

0

你可以稍微简化你的代码

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

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

于 2012-10-24T19:10:34.973 回答
0

show在这个小提琴中为我工作。你确定你的条件得到满足吗？尝试在alert('conditions met');里面扔一个if看它是否被触发。

于 2012-10-24T19:13:21.607 回答
0

考虑分配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属性的切换。

请参阅http://jsfiddle.net/jhfrench/4kNPF/ 上的工作示例

于 2012-10-24T19:17:31.763 回答