为什么 JQuery hide() 和 show() 不起作用？答案

【问题标题】：Why JQuery hide() and show() does not work?为什么 JQuery hide() 和 show() 不起作用？
【发布时间】：2013-06-25 06:33:43
【问题描述】：

我有一个简单的 DIV，无法让它隐藏（）和显示（）。

我想我做得对，但找不到问题所在。

<div id="thediv" >hola</div>
<input type="button" value="click to show">This is the div content</input>

$(document).ready(function() {
    $("div#thediv").hide();
    alert($("div#thediv").hide().attr("id"));
});

$("button").click( function() {
    $("div#thediv").show();
    alert('click');
});

另外，我在link"http://jsfiddle.net/rt9Fc/"创建了一个小提琴。

有什么想法吗？

【问题讨论】：

标签： jquery html hide show

【解决方案1】：

将您的点击处理程序放入 document.ready 并将您的选择器更改为 $("input:button") -

$(document).ready(function () {
    $("div#thediv").hide();
    alert($("div#thediv").hide().attr("id"));
    $("input:button").click(function () {
        $("div#thediv").show();
        alert('click');
    });
});

演示--->JsFiddle

【讨论】：

【解决方案2】：

您的代码有更合适的版本：JsFiddle

HTML：

<div id="thediv">hola</div>
<input type="button" value="click to show"/>

JavaScript：

$(function() {
    var $myDiv = $("#thediv");
    $myDiv.hide();
    alert($myDiv.attr("id"));

   $("input[type=button]").on('click', function() {
      $myDiv.show();
      alert('click');
    });
});

一些有用的注释：

缓存查找 DOM 元素，因为查找它们的成本很高
使用 on 而不是 click，它工作得更快
$function() 是 document.ready 的别名，写入速度更快，通过网络发送的字节更少:)
你不必使用 div#id 选择器，#id 就足够了，因为它在你的页面中应该是唯一的，而且这样在 jquery 将使用 findElementById javascript 函数之后，它就不必对 div 执行额外的检查。
有一篇关于 jQuery 性能的好文章：artzstudio
输入不应分为打开和关闭标签。

可能你想要这个：

HTML：

<div id="thediv">
    hola
    <input type="button" value="click to show"/>
</div>

这样我们就可以优化 JavaScript：

$(function() {
    var $myDiv = $("#thediv");
    $myDiv.hide();
    alert($myDiv.attr("id"));

   $myDiv.find("input[type=button]").on('click', function() {
      $myDiv.show();
      alert('click');
    });
});

【讨论】：

【解决方案3】：

更改按钮selector：就像您使用简单的<input type='button'/> 一样，如果您想使用$('button')，请将您的标记更改为<button></button>

$("#thediv").hide();
alert($("div#thediv").hide().attr("id"));


$("input[type='button']").click( function() {
    $("#thediv").show();

});

演示 --> JsFiddle

【讨论】：

【解决方案4】：

将您的按钮选择器更改为:button 或使用输入。 button 选择器用于<button>Somebutton</button>

$(document).ready(function() {

   var $thediv = $('#thediv').hide(); //Cache the object here. Also you can shain it through

    $(":button").click( function() {
    $thediv.show();
    alert('click');
});
});

Fiddle

如果你有 id，不要在它前面加上标记名。它会使选择器变慢。所以只需使用#thediv 而不是div#thediv。如果您在多个地方使用它，也尝试将 jquery 对象缓存到一个变量中，这将避免每次调用 jquery 对象创建。

【讨论】：

【解决方案5】：

给按钮一个id

<div id="thediv">hola</div>
<input type="button" id="btn" value="click to show"/>

使用此代码

$(document).ready(function() {
$("div#thediv").hide();
alert($("div#thediv").attr("id"));
});

$("input#btn").click( function() {
$("div#thediv").show();
alert('click');
});

【讨论】：