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。

我试着放一个 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()方法添加/删除类。如果它使用 then 进行测试，它应该在和fav之间来回切换。所以不需要 IF 语句。favfav_

编辑：

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

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