时间戳

首页 > 解决方案 > Jquery条件类添加

html - Jquery条件类添加

问题描述

所以我正在使用一些 jQuery 开发这个小型前端项目选择了其他选项。因此，假设选择了 Name-1 它会获得背景颜色更改，但是如果在 Name-1 的背景颜色之后立即选择 Name-2 应该消失并添加到 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);
}

标签： htmljquerycssconditional-statements

解决方案

你可以这样做：

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

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

$("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>

推荐阅读