jQuery的if else语句（else无效）

Question

当页面加载时，我希望thumb有一个新的类，当我点击按钮时，删除新的类。这个功能很好用。现在我想说，如果thumb确实有新的类，则div info应该被隐藏，如果没有，则应该显示。

我理解这与thumb在页面加载时添加了新的类有关，但为什么我不能在单击函数上覆盖它？

$('.thumb').addClass('new');

$('#button').click(function(){
    $('.thumb').removeClass('new');
});

if ($('.thumb').hasClass('new')) {
    $('.info-top').hide();
} else {
    $('.info-top').show();
}

jsFiddle

- Alga

---

把语句放在事件处理程序里怎么样？ - adeneo

那个if语句永远不会起作用，因为你总是在移除类。 - adeneo

你的代码会在你点击按钮时移除类，仅此而已。如果你期望这个改变在页面重新加载后仍然存在，那么你的想法是错误的。 - Rafael

Answer 1

像这样 http://jsfiddle.net/qe4nM/

• 请注意函数callmeman，您需要在需要调用它们的事件上调用该函数。

根据您的需求，可以简化它，例如使用toggle

希望其余部分符合您的需求:)

代码

$('.thumb').addClass('new');
callmeman();

 $('#Button').click(function () {
     $('.thumb').removeClass('new');
     callmeman();
 });

 function callmeman(){
     if ($('.thumb').hasClass('new')) {
         $('.info-top').hide();
      } else {
         $('.info-top').show();
     }
 }

- Tats_innit

---

那个完美地解决了问题！谢谢你和其他所有人的回答，我真的很感激！ - Alga

@Alga，很高兴能帮到你！:) - Tats_innit

Answer 2

你的fiddle中有两个问题：

1）在JS中，你的目标是id为button，但是你给div一个ID为Button。JS区分大小写，所以它们需要匹配。

2）div内的锚点在点击时会重新加载页面，所以除非你使用jQuery的preventDefault()来阻止其预期操作，否则你将永远看不到想要的效果。我建议将click事件完全移动到锚点上，防止默认行为，并将removeClass更改为toggle。这是已经完成这项工作的fiddle分支：http://jsfiddle.net/ftE5W/1/

HTML

<div><a id="button" href="#">Button</a></div>
<div class="info-top">Info</div>
<div class="thumb">Thumb</div>

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

- Rob Allen

Answer 3

你需要将它放入事件处理程序中

$(function(){
    $('.thumb').addClass('new');

    $('#Button').click(function(){
        $('.thumb').removeClass('new');
     });

    if ($('.thumb').hasClass('new')) {
        $('.info-top').hide();
     } else {
        $('.info-top').show();
     }
});    

$(function() { .... }); 是 $(document.body).ready(function(){...}); 的替代方法。

顺便提一下，您拼错了id。您应该将"#button"改为"#Button"。

http://jsfiddle.net/#&togetherjs=0nSDlfUi2c

- Karolis Gudiškis

Answer 4

您的hide()和show()函数只在页面加载时被调用一次。您应该将它们包含在点击监听器中。

$('.thumb').addClass('new');

$('#button').click(function(){

    $('.thumb').removeClass('new');
    if ($('.thumb').hasClass('new')) {
        $('.info-top').hide();
    } else {
      $('.info-top').show();
}
});

但它看起来不是很好，我会稍微改动一下这段代码

$('.thumb').addClass('new');
$('.info-top').show()

$('#button').click(function(){

    $('.thumb').removeClass('new');
    $('.info-top').hide();

});

- Tamara

Answer 5

请检查按钮ID，您拼写错误了

$('#button') 

而不是

$('#Button')

- Venkat