点击无序列表项切换背景色功能失效，求技术协助

你的代码主要有两个核心问题导致功能失效，我来一步步帮你修复：

问题1：this指向错误 #

你在onclick里传入了this（当前li元素）到函数，但函数内部用$(this)时，这里的this并不是你点击的li——因为直接调用函数时，this默认指向全局对象（浏览器里是window）。你应该直接使用传入的obj参数来获取当前点击的li元素。

问题2：jQuery css() 方法调用错误 #

jQuery的css()方法如果要设置单个样式，正确语法是css(属性名, 属性值)，而不是把完整的样式声明写成一个字符串。另外如果必须用!important，需要用css('cssText', '样式声明')的方式，或者更推荐用CSS类来替代内联样式的!important。

方案1：修复现有代码 #

先把你的函数修正，解决上述两个问题：

function getDealsTable(obj) { 
  // 用传入的obj获取当前li，而不是$(this)
  const $currentLi = $(obj);
  // 设置当前li的背景色，用cssText处理!important
  $currentLi.css('cssText', 'background-color: rgba(86, 142, 175, 1) !important'); 
  // 重置兄弟li的背景色
  $currentLi.siblings('li').css('cssText', 'background-color: rgba(15, 86, 132, 1) !important'); 
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class='tenors'> 
  <li onclick='getDealsTable(this);'>12x</li> 
  <li onclick='getDealsTable(this);'>24x</li> 
  <li onclick='getDealsTable(this);'>36x</li> 
  <li onclick='getDealsTable(this);'>48x</li> 
</ul>

方案2：更优的CSS类切换方式（推荐） #

直接操作内联样式并使用!important不是最佳实践，推荐用CSS类来管理状态，更易维护且避免样式冲突：

第一步：定义CSS类 #

.tenors li {
  background-color: rgba(15, 86, 132, 1);
  /* 可以加一些过渡动画，提升交互体验 */
  transition: background-color 0.2s ease;
}
.tenors li.active {
  background-color: rgba(86, 142, 175, 1);
}

第二步：修改JavaScript（推荐用事件委托，避免每个li写onclick） #

$(function() {
  // 事件委托：给父元素ul绑定点击事件，监听子li的点击
  $('.tenors').on('click', 'li', function() {
    // 给当前点击的li添加active类，移除兄弟li的active类
    $(this).addClass('active').siblings('li').removeClass('active');
    // 这里可以获取tenor值
    const tenor = $(this).text();
    console.log('选中的tenor:', tenor);
  });
});

第三步：简化HTML（去掉onclick属性） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class='tenors'> 
  <li>12x</li> 
  <li>24x</li> 
  <li>36x</li> 
  <li>48x</li> 
</ul>

这种方式的优势：

• 样式和逻辑分离，更易维护
• 避免内联样式的!important，减少样式冲突
• 事件委托更高效，尤其是列表项动态生成的场景

内容的提问来源于stack exchange，提问作者Cross Vander