为什么 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
Why JQuery hide() and show() does not work?
提问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 :button
or use input. button
selector 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');
});
});
If you have id, don't prefix it with tagname. it will make the selector slower. So just use #thediv
instead 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');
});