removeClass上的元素箭头使用jquery

Question

有一个带有标题和标题箭头(向下/向上)的表格

<th><div>
<div class='column-name'>Col1</div>
<div class='arrows'>
<div class="i-con-arrow-down"></div>
<div class="i-con-arrow-up"></div>
</div>
</div></th>
<th><div>
<div class='column-name'>Col2</div>
<div class='arrows'>
<div class="i-con-arrow-down"></div>
<div class="i-con-arrow-up"></div>
</div>
</div></th>
<th><div>
<div class='column-name'>Col3</div>
<div class='arrows'>
<div class="i-con-arrow-down"></div>
<div class="i-con-arrow-up"></div>
</div>
</div></th>

我希望在单击箭头时添加类，并在其他箭头中删除它。我为单击(向下箭头)编写了这样的处理程序，我如何确保从所有其他箭头中删除该类?突破了父母和兄弟姐妹的不同评论，但没有效果。

$('body').on('click', '.i-con-arrow-down', function() {
$(this).addClass('text-primary').siblings().removeClass('text-primary');
});

Answer 1

如果我正确理解你的问题，那应该是一个工作代码。

$('body').on('click', '.i-con-arrow-down, .i-con-arrow-up', function() {
$('.text-primary').removeClass('text-primary');
$(this).addClass('text-primary');
});

.i-con-arrow-down, .i-con-arrow-up {
background: black;
padding:20px;
margin: 20px;
}
.text-primary {
background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<th><div>
<div class='column-name'>Col1</div>
<div class='arrows'>
<div class="i-con-arrow-down"></div>
<div class="i-con-arrow-up"></div>
</div>
</div></th>
<th><div>
<div class='column-name'>Col2</div>
<div class='arrows'>
<div class="i-con-arrow-down"></div>
<div class="i-con-arrow-up"></div>
</div>
</div></th>
<th><div>
<div class='column-name'>Col3</div>
<div class='arrows'>
<div class="i-con-arrow-down"></div>
<div class="i-con-arrow-up"></div>
</div>
</div></th>