javascript - 改变颜色 <li>

Question

我正在做一项调查，我现在想做的是，当有人点击我列表中的答案(例如:8)时，该答案的背景会改变颜色。这必须适用于每个单独的答案(有 60 个问题)。

列表html/css代码:

<div class="answers">
    <ul>
        <li class="liFirst">1</li>
        <li class="liMiddle">2</li>
        <li class="liMiddle">3</li>
        <li class="liMiddle">4</li>
        <li class="liMiddle">5</li>
        <li class="liMiddle">6</li>
        <li class="liMiddle">7</li>
        <li class="liMiddle">8</li>
        <li class="liMiddle">9</li>
        <li class="liLast">10</li>
    </ul>
</div>

.answers {
  float: right;
  width: 400px;
  height: auto;
  margin: 0;
  background: #DFE5E3;
}

.answers ul {
  display: inline-block;

}

.answers li {
  float: left;
  padding: 0 auto; 
  font-weight: bold;
}

我已经对此进行了一些研究，但似乎找不到可行的解决方案。我想我必须在 JS/jQuery 中执行此操作？

试过这个解决方案:link!但似乎对我不起作用

Answer 1

添加一个事件类

.active{
    background:#000;
    color:#FFF;
}

在 jquery 切换类中

$('ul li').on('click',function(){
   $(this).toggleClass('active');
});

如果他只想选择一个答案

$('ul li').on('click',function(){
   $(this).toggleClass('active').siblings().removeClass('active');
});