Jquery条件类添加

Question

因此，我正在使用一些jQuery处理这个小前端项目--我想在有一个名称列表的地方做一些事情，如果单击它，应该添加一个" selected“类，但是如果选择了其他选项，我想删除这个类。因此，假设Name-1被选中，它会得到一个背景颜色变化，但是如果Name-2是在名称的背景色之后选择的-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");
})

编辑-解释-您通过这个选择器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>

​