javascript - 需要帮助使用 jquery 操作类

Question

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

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

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

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

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

});

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

我试着放一个变量来检查。例如:

• 如果点击一次: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_");
   });
});