0

根据之前在 SO 上回答的一个问题，我制作了这个脚本，它将 CSS 类添加到 onClick 元素中。问题是它只能工作一次。如何重置功能？

这是 jQuery 代码：

jQuery(function() {
jQuery('.close-button').click(function(){
    jQuery(".content-display").addClass("cover");
    jQuery(".close-button").addClass("cover");
});

jQuery('.project').click(function(){
    jQuery('.content-display').addClass("uncover");
    jQuery('.close-button').addClass("uncover");
    }); 
});

和一切都摆弄着。

4

3 回答 3

4

改用.toggleClass()：

jQuery('.project').click(function(){
        jQuery('.content-display').toggleClass("cover");
        jQuery('.close-button').toggleClass("cover");
    }); 
});

这样，如果该类已经存在，它将被删除；否则，它将被添加。此外，您应该切换cover类，因为divs 最初是可见的。

演示。

于 2012-09-23T21:20:43.427 回答
2

您需要删除替代类的行动。在当前代码中同时按下 close 和 project 后，您将同时拥有覆盖和发现类

jQuery(function() {
   jQuery('.close-button').click(function(){
       jQuery(".content-display").addClass("cover").removeClass("uncover");
       jQuery(".close-button").addClass("cover").removeClass("uncover");
   });

   jQuery('.project').click(function(){
       jQuery('.content-display').addClass("uncover").removeClass("cover");
       jQuery('.close-button').addClass("uncover").removeClass("cover");
   }); 
 });

对于这种特殊情况，似乎没有必要使用发现类，我投票支持简单的 removeClass 解决方案（@Stuart Feldt）

于 2012-09-23T21:27:55.450 回答
1

如果你只是想隐藏和显示 div，你可以尝试：

jQuery(function() {
    jQuery('.close-button').on('click', function(){
        jQuery(".content-display").addClass("cover");
        jQuery(".close-button").addClass("cover");
    });

    jQuery('.project').on('click', function(){    
        jQuery(".content-display").removeClass("cover");
        jQuery(".close-button").removeClass("cover");
    }); 
});
于 2012-09-23T21:28:08.297 回答