Jquery添加和删除一个div的多个类

Question

我有 3 个 div:

我想删除 <h4> 中的蓝色背景如果我单击下一个或上一个 div。

我想在我的 <i class="fa fa-lg fa-gamepad"></i> 中插入一个类如果<h4>有蓝色黑底(上图)。

但如果我只是单击图标 <i>该特定 div 的图标颜色发生变化。

我希望我已经说清楚了。

html:

<div class="box"><i class="fa fa-lg fa-gamepad"></i><h4>div 1 </h4></div>
<div class="box"><i class="fa fa-lg fa-gamepad"></i><h4>div 2 </h4></div>
<div class="box"><i class="fa fa-lg fa-gamepad"></i><h4>div 3</h4></div>

js:

$(document).ready(function() {
  var $box = $('.box').mousedown(function() {
    $('h4',this).toggleClass('highlight');
    var flag = $(this).hasClass('highlight')
    $box.on('mouseenter.highlight', function() {
      $('h4',this).toggleClass('highlight', flag);
    });
  });
  $(document).mouseup(function() {
    $box.off('mouseenter.highlight')
  })
});

CSS:

.box {
  float: left;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  margin-right: 10px;
}

.highlight {
  background: #0000FF;
}


.fa-gamepad {
  color: red;
}

https://jsfiddle.net/wv4f2hda/12/

Answer 1

您可以使用 .removeClass 和 .addClass 来帮助这里并在选定的内容和未选定的内容之间切换。我拿出你的 h4，先删除所有类，然后添加到所选的类

$(document).ready(function() {
  var $box = $('.box').mousedown(function() {
  $(".box").removeClass('highlight'); //removeing class
  $(this).addClass('highlight'); //adding to selected
  var flag = $(this).hasClass('highlight')
  $box.on('mouseenter.highlight', function() {
  $('h4',this).toggleClass('highlight', flag);
   });
  });
$(document).mouseup(function() {
$box.off('mouseenter.highlight')
  })
});

https://jsfiddle.net/MaXiNoM/8upn5kcv/2/