Jquery if else 语句（否则不工作）答案

【问题标题】：Jquery if else statement (else not working)Jquery if else 语句（否则不工作）
【发布时间】：2017-08-04 08:08:21
【问题描述】：

我希望 thumb 在页面加载时拥有新类，并在我单击按钮时删除新类。这很好用。现在我想说的是，如果 thumb 确实有类 new，那么应该隐藏 div 信息，如果没有，它应该显示。

我知道这与 thumb 在页面加载时添加了新类有关，但为什么我不能覆盖 click 函数？

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

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

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

jsFiddle

【问题讨论】：

如何将语句放在事件处理程序中。
而且 if 语句永远不会起作用，你总是在删除类
您的代码发生的情况是，当您单击按钮删除类时，就是这样。如果您期望重新加载页面时会进行此更改，那您就大错特错了。

标签： jquery if-statement

【解决方案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();
     }
 }

【讨论】：

效果很好！谢谢你和其他人的回答，我真的很感激！
@Alga 很高兴它有帮助！ :)

【解决方案2】：

你的小提琴有两个问题：

1) 您在 JS 中定位 id button，但您给 div 的 ID 为 Button。 JS是区分大小写的，所以需要匹配

2) div 内的锚点正在重新加载您的页面 onclick，因此您永远不会看到您正在寻找的效果，除非您使用 jQuery 的 preventDefault() 阻止该元素执行其预期操作。我会将您的点击事件完全移动到锚点，preventDefault，并将您的 removeClass 更改为切换。这是您完成这项工作的小提琴：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();
}

【讨论】：

【解决方案3】：

您的带有 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();

});

【讨论】：

【解决方案4】：

检查按钮ID，你拼错了

$('#button')

而不是

$('#Button')

【讨论】：

【解决方案5】：

您需要将其放入事件处理程序中

$(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

【讨论】：