Question

基于之前在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");
    }); 
});

一个fiddle包含所有内容。

Answer 1

改为使用.toggleClass()：

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

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

<强> DEMO

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

对于这个特殊情况，使用uncover类似乎是不必要的，我投票给简单的removeClass解决方案（@Stuart Feldt）

Answer 3

如果您只想隐藏并显示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");
    }); 
});

jQuery onClick动作不会触发第二次

3 个答案: