Jquery if else 语句（否则不起作用）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20846780/
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
Jquery if else statement (else not working)
提问by Alga
I want thumb to have class new when the page loads and remove the class new when I click a button. That works fine. Now I want to say that if thumb does have class new, then div info should be hidden, and if it doesn't, it should show.
我希望拇指在页面加载时具有新类，并在单击按钮时删除新类。这很好用。现在我想说，如果拇指确实有新的类，那么应该隐藏 div 信息，如果没有，它应该显示。
I understand this is to do with thumb having the new class added when the page loads, but why can't I override than on the click function?
我知道这与在页面加载时添加新类的拇指有关，但为什么我不能覆盖点击功能？
$('.thumb').addClass('new');
$('#button').click(function(){
$('.thumb').removeClass('new');
});
if ($('.thumb').hasClass('new')) {
$('.info-top').hide();
} else {
$('.info-top').show();
}
回答by Tats_innit
like thishttp://jsfiddle.net/qe4nM/
- Take a note on the function
callmemanyou need to call the function on the events you need them to be invoked.
- 记下在
callmeman需要调用它们的事件上调用该函数所需的函数。
It can be simplified depending on your reqs. like use toggle
它可以根据您的要求进行简化。喜欢用toggle
Hope rest fits the need :)
希望休息适合需要 :)
code
代码
$('.thumb').addClass('new');
callmeman();
$('#Button').click(function () {
$('.thumb').removeClass('new');
callmeman();
});
function callmeman(){
if ($('.thumb').hasClass('new')) {
$('.info-top').hide();
} else {
$('.info-top').show();
}
}
回答by Rob Allen
There are 2 problems in your fiddle:
你的小提琴有两个问题：
1) You are targeting the id buttonin your JS, but you gave the div an ID of Button. JS is case-sensitive, so they need to match
1) 您button在 JS中定位 id ，但您给 div 的 ID 为Button. JS 区分大小写，所以他们需要匹配
2) The anchor inside the div is reloading your page onclick so you will never see the effect you are looking for unless you stop that element from performing it's intended action usingjQuery's preventDefault()on it. I would move your click event to the anchor entirely, preventDefault, and change your removeClass to a toggle. Here is your fiddle forked with that work done: http://jsfiddle.net/ftE5W/1/
2) div 内的锚点在点击时重新加载您的页面，因此您将永远不会看到您正在寻找的效果，除非您使用 jQuery 的preventDefault()阻止该元素执行它的预期操作。我会将您的点击事件完全移动到锚点，preventDefault，并将您的 removeClass 更改为切换。这是你完成这项工作的小提琴：http: //jsfiddle.net/ftE5W/1/
HTML
HTML
<div><a id="button" href="#">Button</a></div>
<div class="info-top">Info</div>
<div class="thumb">Thumb</div>
JS
JS
$('.thumb').addClass('new');
$('#button').click(function(e){
e.preventDefault();
$('.thumb').toggleClass('new');
});
if ($('.thumb').hasClass('new')) {
$('.info-top').hide();
$('.thumb').removeClass('new');
}
else {
$('.info-top').show();
}
回答by Karolis Gudi?kis
You need to put it into event handler
您需要将其放入事件处理程序中
$(function(){
$('.thumb').addClass('new');
$('#Button').click(function(){
$('.thumb').removeClass('new');
});
if ($('.thumb').hasClass('new')) {
$('.info-top').hide();
} else {
$('.info-top').show();
}
});
$(function() { .... });is alternative of $(document.body).ready(function(){...});
$(function() { .... });是替代 $(document.body).ready(function(){...});
By the way you misspelled id. You should change "#button"into "#Button".
顺便说一句，你拼错了id。你应该"#button"换成"#Button".
回答by Tamara
Your functions with hide() and show() functions are called only once during page loading. You should include it in click listener.
您的带有 hide() 和 show() 函数的函数在页面加载期间仅调用一次。您应该将其包含在点击侦听器中。
$('.thumb').addClass('new');
$('#button').click(function(){
$('.thumb').removeClass('new');
if ($('.thumb').hasClass('new')) {
$('.info-top').hide();
} else {
$('.info-top').show();
}
});
But it doesn't look very well, I would change this code a bit
但它看起来不太好，我会稍微更改一下这段代码
$('.thumb').addClass('new');
$('.info-top').show()
$('#button').click(function(){
$('.thumb').removeClass('new');
$('.info-top').hide();
});
回答by Venkat
Check the button id, you misspelled
检查按钮 id，你拼错了
$('#button')
instead of
代替
$('#Button')
