Question

我有一个简单的DIV，无法将其隐藏（）和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');
});

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

有什么想法吗？

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

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元素，因为它们的查找成本很高
使用而不是点击，它可以更快地运行
$function()是document.ready的别名，写入速度更快，通过网络发送的字节更少：）
你不必使用div＃id选择器，＃id就足够了，因为它在你的页面中应该是唯一的，而且在jquery使用findElementById javascript函数之后，它将不必执行div的额外检查。 / LI>
有一篇关于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');
    });
});

Answer 3

将按钮选择器更改为: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对象。

Answer 4

更改按钮selector：如果您想使用<input type='button'/>将标记更改为$('button')

，则仍然使用简单的<button></button>

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


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

});

DEMO --> JsFiddle

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

为什么JQuery hide（）和show（）不起作用？

5 个答案: