Question

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

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

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

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

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

jsFiddle

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

你的小提琴有两个问题：

1）您的目标是JS中的ID button，但您为div提供了Button的ID。 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();
}

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

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

});

Answer 5

检查按钮ID，拼写错误

$('#button')

而不是

$('#Button')

Jquery if else语句（否则不起作用）

5 个答案: