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

我需要以下代码的帮助：

$(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，因此可能会遇到困难。

最佳答案

您需要在变量中保留对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_");
   });
});