javascript - 单击与其父类具有相同类的子 div 时，应将某些类添加到子 div 而不是父 div，反之亦然

Question

我有以下 html 结构。

<div class="someclass">
    <div class="someclass"></div>
</div>

所以当我点击子 div“someclass”时，其他一些类说“test”应该添加到它但是那个类不应该添加到父 div.someclass 如果我点击父 div 那么“test”类应该添加到父 div 而不是子 div

Answer 1

使用 .addClass 并使用 this 上下文。 stopPropogation 不会在 parent 元素上冒泡该事件。

$('.someclass').on('click', function(e) {
  e.stopPropagation();
  $('.someclass').removeClass('test');
  $(this).addClass('test');
})

.test {
  color: red!important;
}
.someclass {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="someclass">Parent
  <div class="someclass">Child</div>
</div>