Jquery 寻找toggleClass的解决方案

我有一个按钮，我想根据某个类是否已经有该类来添加或删除该类。我尝试了toggleClass，它工作得很好，但我想知道是否有toggleClass的解决方案，或者说一般的toggleClass。这是我用过的东西：

  $(document).ready(function() {
      if($('#header-bar a.close').hasClass('activated')) {
          $(this).removeClass('activated');
      } else {
          $(this).addClass('activated');
      }
  });

但它不起作用。html在这里：

<div id="header-bar">
not
    <a href="#" class="close"></a>
</div>

---

小提琴：

您没有正确使用

此

。在您的示例中，它引用了ready函数，因此它不会将类添加或删除到锚点。将代码更新为：

$(document).ready(function() {
    var elem = $('#header-bar a.close');
    if(elem.hasClass('activated')) {
        elem.removeClass('activated');
    } else {
        elem.addClass('activated');
    }
});

我已经更新了你的密码

我尝试了toggleClass，它工作得很好，但我想知道是否有toggleClass的解决方案，或者说一般的toggleClass。这是我用过的东西

是的，你可以手工做。它不适用于您的原因是您将更改应用于错误的对象<代码>此不是该代码中的链接/按钮。将此更改为同一对象（在本例中，我将查找结果存储在变量中以避免重复）：

但这正是

toggleClass

的目的，避免了这项工作

请注意，您的代码（如图所示）仅在页面首次加载时运行，而且由于您的HTML没有该类，因此它最终总是被添加。如果您的目标是来回翻转以响应某种事件，则必须为该事件附加一个处理程序。例如，单击按钮时会执行此操作：

$(document).ready(function() {
    $('#header-bar a.close').on("click", function() {
        // Inside this click handler, `this` is the DOM element for the link
        var link = $(this); // Get a jQuery wrapper
        if(link.hasClass('activated')){
            link.removeClass('activated');
        }
        else {
            link.addClass('activated');
        }
    });
});

但同样，使用

toggleClass

可以简单得多，因此没有太多理由使用它进行“变通”：

$(document).ready(function() {
    $('#header-bar a.close').on("click", function() {
        $(this).toggleClass("activated");
    });
});

使用方法如下

$(document).ready(function() {
    $('#header-bar a.close').click(function(){     
       $('#header-bar a.close').hasClass('activated')==true?$('#header-bar a.close').removeClass('activated'):$('#header-bar a.close').addClass('activated')
    });
});

---

为什么需要解决方法？

此

指的是窗口。切换类有什么问题吗？你为什么要重新发明轮子？看看这个。+1，但是：“在您的示例中，它引用了ready函数的作用域”

this

，而作用域在JavaScript中彼此无关（直到ES6在“arrow”函数上为我们提供词法

this

。@T.J.Crowder同意，但我总是使用术语scope，哪一个更好？据我所知，词汇范围界定这个术语在ES5中已经存在了？@Anzeo:这个术语存在，它只是与

这个

无关。ES6添加了“arrow”函数，它的

值是按词汇设置的，而不是按函数的调用方式设置的。Re是一个术语：据我所知，“this

的值”没有一个好的单字术语。有一段时间（几年前），PrototypeJS的人一直在推动“上下文”，但这确实令人困惑，因为上下文已经有了一个特定的（不同的）含义，所以它没有流行起来。“范围”是一个特别不幸（但并不少见）的术语，因为它也有一个特定的含义，并且与

这个

完全无关。

$(document).ready(function() {
    $('#header-bar a.close').on("click", function() {
        $(this).toggleClass("activated");
    });
});

$(document).ready(function() {
    $('#header-bar a.close').click(function(){     
       $('#header-bar a.close').hasClass('activated')==true?$('#header-bar a.close').removeClass('activated'):$('#header-bar a.close').addClass('activated')
    });
});