Question

<div>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
</div>

如果用户点击某个范围，我需要在该范围内应用样式（文本颜色），并在该div中应用所有前面的跨度。并删除之前单击的跨度操作。跨度没有类和id。

如何使用J Query实现此目的？

Answer 1

要选择点击元素的所有先前兄弟元素，您可以使用prevAll()，但也要包含您需要添加andSelf()的点击元素。此外，每次点击span时，您首先需要删除所有span的背景信息。

＆＃13;

$('div span').click(function() {
  $('div span').css('background', 'none');
  $(this).prevAll().andSelf().css('background', 'red')
})

＆＃13;

body {
  padding-top: 10px;
}
span {
  cursor: pointer;
  padding: 10px;
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
</div>

＆＃13;

Answer 2

检查this小提琴代码是否有帮助。

<强> JS：

$('span').click(function(){
    $(this).siblings().css('color','')
    $(this).css('color','red');
  $(this).prevAll().css( "color", "red" );
});

如何在div中单击span并使用JQuery修改其前面的跨度和后续跨度？

2 个答案: