Jquery条件类添加

Question

所以我正在用一些jQuery做这个小的前端项目，我想做一些事情，那里有一个名称列表，如果你点击它；选择"；应该添加，但如果选择了其他选项，我想删除该类。所以假设Name-1被选中，它会有一个背景颜色变化，但如果Name-2被选中，那么Name-1的背景颜色应该消失并添加到Name-2中，而我有多个名字，所以我不能为每个选项都创建一个函数。我想知道是否有更简单的方法。

HTML

<ul class="names">
<li class="name selected">Name-1</li>
<li class="name">Name-2</li>
<li class="name">Name-3</li>
</ul>

CSS

.selected {
background-color: rgba(0, 0, 0, 0.3);
}

Answer 1

您可以这样做：

$("ul.names li").on("click", function(){
$("ul.names li").removeClass("selected");
$(this).addClass("selected");
})

EDIT-解释您通过该选择器ul.names li选择所有<li>标记并一起操作它们，首先通过该$("ul.names li").removeClass("selected");从所有li标记中删除selected类，然后将selected类添加到由this关键字表示的所选li标记中

$("ul.names li").on("click", function() {
$("ul.names li").removeClass("selected");
$(this).addClass("selected");
})

.selected {
background-color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="names">
<li class="name selected">Name-1</li>
<li class="name">Name-2</li>
<li class="name">Name-3</li>
</ul>

Answer 2

这样的东西应该可以工作。

$('.name').on('click', function() {
$('.name').removeClass('selected').css('background','none');
$(this).addClass('selected').css('background',$(this).data('bg'));
});
$('.name.selected').css('background',$('.name.selected').data('bg'));

.selected {
color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="names">
<li class="name selected" data-bg="green">Name-1</li>
<li class="name" data-bg="red">Name-2</li>
<li class="name" data-bg="blue">Name-3</li>
</ul>