Jquery条件类添加答案

【问题标题】：Jquery Conditional Class addJquery条件类添加
【发布时间】：2021-08-26 01:39:14
【问题描述】：

所以我正在使用一些 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);
}

【问题讨论】：

检查这个问题：stackoverflow.com/questions/67750214/…
这确实有道理，但问题是他们正在使用选项而不是 UL 和 LI(s)，而这正是我在这个项目中特别想要的。
@OutdatedDNZ 我的回答对你有帮助吗？
明白每个名字都有不同的背景。 我有多个名字，所以我不能为每个选项都创建一个函数

标签： html jquery css conditional-statements

【解决方案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 类添加到所选@ 987654328@标签由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>

【讨论】：

为什么不赞成，@OutdatedDNZ 接受了这个作为答案
@OutdatedDNZ 你需要改变颜色吗？
没关系，我接受了这个作为答案，我没有投反对票
@OutdatedDNZ 谢谢，是的，我知道你没有投反对票
@OutdatedDNZ 你也可以投票吗？谢谢

【解决方案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>

【讨论】：