5

我有一个简单的 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');
});

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

有任何想法吗？

4

5 回答 5

10

将您的点击处理程序放入 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

于 2013-06-27T16:34:30.070 回答
5

您的代码有更合适的版本：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');
    });
});
于 2013-06-27T16:42:11.473 回答
2

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

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


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

});

演示 --> JsFiddle

于 2013-06-27T16:36:38.487 回答
1

将您的按钮选择器更改为: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');
});
});

小提琴

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

于 2013-06-27T16:35:26.623 回答
0

给按钮一个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');
});
于 2017-02-03T11:37:31.213 回答