Jquery if else 语句(else 不起作用)

Question

我希望拇指在页面加载时具有新类，并在单击按钮时删除新类。这工作正常。现在我想说的是，如果拇指确实有新的类，那么div 信息应该被隐藏，如果没有，它应该显示。

我知道这与拇指在页面加载时添加新类有关，但为什么我不能覆盖而不是点击功能？

$('.thumb').addClass('new');
$('#button').click(function(){
    $('.thumb').removeClass('new');
});
if ($('.thumb').hasClass('new')) {
    $('.info-top').hide();
} else {
    $('.info-top').show();
}

js小提琴

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

Answer 2

你的小提琴有 2 个问题：

1） 您的目标是 JS 中的 id button，但您为div 提供了 Button 的 ID。JS区分大小写，因此它们需要匹配

2）div 中的锚点正在重新加载您的页面，因此您将永远不会看到您正在寻找的效果，除非您使用 jQuery 的 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();
}

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

Answer 4

检查按钮 ID，您拼写错误

$('#button') 

而不是

$('#Button')

Answer 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