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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17348552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 18:51:50  来源:igfitidea点击:

Why JQuery hide() and show() does not work?

jqueryhtmlhideshow

提问by Luciano

I have a simple DIV and can't get it to hide() and show().

我有一个简单的 DIV,无法将其隐藏()和显示()。

I guess I am doing it right but can not find what is wrong with it.

我想我做得对,但找不到它有什么问题。

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

Also, I created a fiddle at link"http://jsfiddle.net/rt9Fc/".

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

Any ideas?

有任何想法吗?

回答by Mohammad Adil

put your click handler inside document.ready and change your selector to $("input:button")-

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

Demo --->JsFiddle

演示--->JsFiddle

回答by 0lukasz0

There is more proper version of your code: JsFiddle

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

HTML:

HTML:

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

JavaScript:

JavaScript:

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

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

Some useful notes:

一些有用的注意事项:

  • cache finding DOM elements beacuse they are expensive to find
  • use on instead of click, it works faster
  • $function()is an alias to document.ready, it's faster to write and less bytes to send over the network :)
  • you don't have to use div#id selectors, #id is enough because it should be unique in your page, moreover that way after jquery will use findElementById javascript function it will not have to perform additional check for div.
  • there is nice article about jQuery performance: artzstudio
  • input should not be split into open and close tag.
  • 缓存查找 DOM 元素,因为它们的查找成本很高
  • 使用 on 而不是 click,它工作得更快
  • $function()是 document.ready 的别名,写入速度更快,通过网络发送的字节更少:)
  • 您不必使用 div#id 选择器,#id 就足够了,因为它在您的页面中应该是唯一的,而且在 jquery 使用 findElementById javascript 函数之后,它就不必对 div 执行额外的检查。
  • 有一篇关于 jQuery 性能的好文章:artzstudio
  • 输入不应分为打开和关闭标签。

Probably you wanted to have this:

可能你想要这个:

HTML:

HTML:

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

That way we can optimise JavaScript:

这样我们就可以优化 JavaScript:

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

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

回答by PSL

Change your button selector to :buttonor use input. buttonselector is used for <button>Somebutton</button>

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

小提琴

If you have id, don't prefix it with tagname. it will make the selector slower. So just use #thedivinstead of div#thediv. Also try to cache the jquery object to a variable if you are using it in multiple places, this will avoid calling the jquery object creation everythime.

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

回答by Dhaval Marthak

Change button selector: as you were using simple <input type='button'/>still if you want to use $('button')change your markup to <button></button>

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

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


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

});

DEMO-->JsFiddle

演示-->JsFiddle

回答by Athul Nalupurakkal

Give an id to button

给按钮一个id

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

Use this Code

使用此代码

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

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