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

Question

我有一个简单的DIV，但无法使用hide()和show()隐藏和显示它。

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

<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');
});

此外，我在链接上创建了一个小示例：http://jsfiddle.net/rt9Fc/。有什么想法？

- Luciano

Answer 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

- Adil Shaikh

Answer 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函数后将不必执行额外的检查。
• 这里有一篇关于jQuery性能的好文章：artzstudio
• input标签不应该拆分成开放和关闭标签。

可能您需要这个：

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');
    });
});

- 0lukasz0

Answer 3

更改按钮的选择器：如果您仍在使用简单的<input type='button'/>，但仍想使用$('button')，请将标记更改为<button></button>

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


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

});

演示 --> JsFiddle

- Dhaval Marthak

Answer 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 (JSFiddle)

如果您有id，请不要在其前缀中加入标签名称，这会使选择器变慢。因此，只需使用#thediv而不是div#thediv。如果您在多个位置使用它，请尝试将jquery对象缓存到一个变量中，这将避免每次调用jquery对象创建。

- PSL

Answer 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');
});

- Athul Nalupurakkal