javascript - 如何使用 JQuery 使一个类同时处于事件状态？

Question

代码:

var $anchors = $(".box_one, .box_two");

$(document).on('click', function (e) {
    var $elem = $(e.target);
    if ($elem.hasClass('box_one') || $elem.hasClass('box_one_active')) {
        $elem.toggleClass('box_one box_one_active');
        $anchors.not($elem).addClass('box_two').removeClass('box_two_active');
    }
    else if($elem.hasClass('box_two') || $elem.hasClass('box_two_active')) {
        $elem.toggleClass('box_two box_two_active');
        $anchors.not($elem).addClass('box_one').removeClass('box_one_active');
    }
    else {
        $('.box_one_active').addClass('box_one').removeClass('box_one_active');
        $('.box_two_active').addClass('box_two').removeClass('box_two_active');
    }
});

在上面的代码中，当单击 box_one 时，box_one_active 会取代 box_one 的位置，而当单击 box_two 时，box_two_active 会取代 box_two 的位置。

如何更改代码，以便当 box_one_active 处于事件状态时，box_two_active 也处于不活动状态同一时间。这意味着，用户必须单击其中一个来禁用另一个并启用一个。

我该怎么做？

Answer 1

我建议不要这样做。相反，只需切换一个事件类，然后编写 CSS 来作用于类的组合。

这是一个示例:Live Copy | Live Source

CSS:

.box_one {
  /* Styles for `box_one` when not active */
  background: blue;
  color: white;
  font-weight: bold;
}
.box_one.active {
  /* Adds/overrides further classes for when `box_one` is also `active` */
  border: 2px solid red;
}
.box_two {
  /* Styles for `box_two` when not active */
  background: green;
  color: white;
  font-weight: bold;
}
.box_two.active {
  /* Adds/overrides further classes for when `box_two` is also `active` */
  border: 2px solid yellow;
}

HTML:

<div class="box_one">This is box_one</div>
<div class="box_two">This is box_two</div>

JavaScript:

$("div").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

请注意添加和删除“事件”类如何改变事情。

在上面我没有覆盖样式，但你可以:Live Copy | Live Source

.box_one {
  /* Styles for `box_one` when not active */
  background: blue;
  color: white;
  font-weight: bold;
}
.box_one.active {
  /* Adds/overrides further classes for when `box_one` is also `active` */
  background: red;
}
.box_two {
  /* Styles for `box_two` when not active */
  background: green;
  color: white;
  font-weight: bold;
}
.box_two.active {
  /* Adds/overrides further classes for when `box_two` is also `active` */
  background: yellow;
}