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

我想根据条件切换显示或隐藏按钮和div。目前，JQuery hide正在为button（）工作，但show（）不适用于div。换句话说，在下面的javascript中，如果条件满足，按钮被隐藏，但div不显示。为什么JQuery显示/隐藏按钮而不是div的工作？

HTML：

<button type="button" id="my-button" onclick="...do something">Go</button> 
<div id="my-text">Please send an email to [email protected]</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") 
      }

然后它正常工作。我以为演出基本上改变了显示风格，所以我不知道为什么我要这样拼出来。任何想法为什么？

来源

2012-10-24 snowleopard

您可以张贴捣鼓这个 –

其工作看http://jsfiddle.net/tWQwQ/1/ – Anoop

对我的作品http://jsfiddle.net/tWQwQ/3/ –

你可以简化你的代码有点

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

将TOGLE元素的可见性，但是这可能不会解决你的问题，它很可能会涉及到如何在HID中的div第一名。尝试将其改为.hide（）而不是手动设置css。有几种隐藏元素的方法.show只恢复其中的一种（与hide（）相同）

来源

2012-10-24 19:10:34

你能告诉我什么是隐藏元素的其他方法？根据http://api.jquery.com/hide/，.hide（）“大致等同于调用.css（'display'，'none'）”。谢谢。 – snowleopard

把它放在屏幕之外，在其他元素之下，设置可视性，零尺寸 –

show适用于此fiddle。你确定你的条件得到满足吗？尝试在if内投掷alert('conditions met');以查看它是否被触发。

来源

2012-10-24 19:13:21

已经检查过。我已经尝试过将各种警报和打印内容放在控制台内，如果它确实在那里进行。谢谢。 – snowleopard

考虑分配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/

来源

2012-10-24 19:17:31

欲了解更多信息，请参阅[http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden](http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden）在咏叹调隐藏。 –

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

回答

相关问题