Question

我有3个div：

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

如果<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

您需要使用各种方法遍历DOM并从h4元素中删除类，该元素不是当前框元素的子元素，即this

$('.box').mousedown(function() {
    //Toggle css for current element
    $('h4',this).toggleClass('highlight');

    //remove class from h4 element which is not child of current box element
    $box.not(this).find('h4').removeClass('highlight');
});

DEMO

Answer 2

您可以使用.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/

Jquery添加和删除div的多个类

2 个答案: