Question

我有这个按钮，我希望根据它是否已经有一个类来添加或删除某个类。我尝试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>

css：

#header-bar a.close{ background-color: #333; color: #ccc; width: 40px; height: 40px; border-radius: 4px; cursor: pointer; float: left;}

小提琴：http://jsfiddle.net/5nRG3/

Answer 1

您没有正确使用this。在您的示例中，它引用了ready函数，因此它不会向锚添加或删除类。将您的代码更新为：

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

我已更新您的Fiddle。

Answer 2

我尝试toggleClass它工作正常，但我想知道是否有toggleclass的工作区，或一般切换。这是我用过的东西

是的，您可以手动执行此操作。它不适合您的原因是您将更改应用于错误的对象。 this不是该代码中的链接/按钮。将this更改为同一对象（在此示例中，我将查找结果存储在变量中以避免重复）：

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

但这正是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可以简单得多，并没有太多的理由去解决问题＆＃34;使用它：

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

Answer 3

使用如下

$(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')
    });
});

DEMO

寻找toggleClass的解决方法

3 个答案: