Question

每当$ home有“活动”类时，我试图将$“pulse”添加到$ choose，然后在home没有活动时删除脉冲，两者都能执行多次。我的功能似乎执行一次然后再也不检查：

$(function () {
    var $home = $(".tabs-group li:last-child a");
    var $choose = $(".tabs-group li");

    if($(home).hasClass("active")) {
    $choose.addClass("pulse");
    };

    if(!($home).hasClass("active")) {
        $choose.removeClass("pulse");
    };
});

我也尝试将它分成两个功能，但也没有用。

$(function () {
    var $home = $(".tabs-group li:last-child a");
    var $choose = $(".tabs-group .sidebar .menu li");
    if(($home).hasClass("active")) {
    $choose.addClass("pulse");
    };

});

$(function () {
    var $home = $(".tabs-group li:last-child a");
    var $choose = $(".tabs-group .sidebar .menu li");
    if(!($home).hasClass("active")) {
    $choose.removeClass("pulse");
    };

});

Answer 1

这是toggleClass的经典用例。请参阅this example.

(function ($) {
  var jqueryMap, onClickHome;

  jqueryMap = {
    $home   : $('.tabs-group li:last-child a'),
    $choose : $('.tabs-group li')
  };

  onClickHome = function ( event ) {
    event.preventDefault();
    jqueryMap.$home.toggleClass( 'active' );
    jqueryMap.$choose.toggleClass( 
      'pulse', jqueryMap.$home.hasClass( 'active' )
    );
  }

  jqueryMap.$home.on( 'click', onClickHome );
}(jQuery));

请注意，我们使用原始事件（在此示例中为click）切换'active'类，然后根据该set设置'pulse'类。如果你试图“神奇地”改变'主动'类改变'脉冲'类，事情变得有点困难 - 这里没有一个简单的解决方案。两个选项：

创建一个更改元素类的包装器。然后，只要在任何或所有元素上调用此事件，就可以触发'classChange'事件。这假设您控制代码和更改类的调用。如果是这种情况，那么您可能已经控制了“活动”类的更改，因此可能不需要此方法。但是，这可能在团队设置中有意义（如果您可以让团队成员使用'changeClass'包装器！）。
创建changeClass事件通用事件。这并不容易，因为WebKit中没有本机事件，因此需要在某个时间间隔内轮询您的元素。请参阅this discussion.

您可能希望考虑命名空间css，以避免与其他库发生冲突：）

Answer 2

你需要听取元素的变化。

$(function () {
    var $home = $(".tabs-group li:last-child a");
    var $choose = $(".tabs-group li");

    if($(home).hasClass("active")) {
    $choose.addClass("pulse");
    };

    if(!($home).hasClass("active")) {
        $choose.removeClass("pulse");
    };

  $(document).on('change', ".tabs-group li:last-child a", function(event){
    var $choose = $(".tabs-group li");        
    if $(event.target).hasClass('active') {
      $choose.addClass('pulse');
    } else {
      $choose.removeClass('pulse');
    }
  });
});

js - 如果为真，请采取行动。如果为false，则撤消操作

2 个答案: