需要帮助使用 jquery 操作类

Question

我需要有关此代码的帮助：

$(document).ready(function() {
    $(".fav").click(function() {

        $(".fav").removeClass("fav").addClass("fav_");
    });

    $(".fav_").click(function() {

       $(".fav_").removeClass("fav_").addClass("fav");
   });

});

点击.favdiv，他会转换为.fav_，反之亦然。好的，但问题是： 如果你点击一次.fav类，他就变成.fav_。但是如果你再点击一次，他就不会再次转换为.fav。

我试着放一个 var 来检查。例如：

• 如果点击一次：fav=true
• 如果点击两次：fav=false

但它不起作用。

我懂 jQuery，但我常用的语言是 PHP，也许这就是困难。

Answer 1

您需要在变量中保留对 DOM 元素的引用，并使用它。这样您就不必再次执行 jQuery 选择器了。

$(document).ready(function() {
  var favs = $(".fav");

  favs.click(function() {
     favs.toggleClass("fav");
     favs.toggleClass("fav_");
  });
});

您还可以使用toggleClass() 方法添加/删除类。如果它使用fav 进行测试，那么它应该在fav 和fav_ 之间来回切换。所以不需要 IF 语句。

编辑：

如果您想切换背景图像的显示，则不必删除 fav CSS 类。只需切换 fav_，因为它的背景会覆盖 fav，因为它在 CSS 源代码中较低。

$(document).ready(function(){
   $(".fav").click(function(){
     $(this).toggleClass("fav_");
   });
});