CSS 仅将类或 css 赋予选定元素

Question

我有一组无序列表。我创建了一些让每个列表都被点击的函数，它将运行一个 JS 函数。现在我想添加一些css，如果单击列表，它的bg颜色会改变。到目前为止我的代码：

function getDealsTable(obj) {
        var tenor = obj.innerHTML;
        $(this).closest('li').css('background-color: rgba(86, 142, 175, 1) !important');
        $(this).closest('li').siblings('li').css('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>

不幸的是，它不起作用。我试图将其更改为课程，但仍然无法正常工作。任何人都可以帮助我吗？谢谢

Answer 1

为了在 jQuery 中使用!important，您需要有 2 个参数。第一个参数是cssText，第二个是你要设置的文字为explained here

例子：

$('.selector').css('cssText', 'color: red !important;')

你也可以直接在javascript中使用on创建点击事件，不需要放在html元素上。

$('ul.tenors > li').on('click', function() {
  // Reset all the li colors (must come first)
  $('ul.tenors > li').css('cssText','background-color: rgba(86, 142, 175, 1) !important;');
  // Set the color of the clicked li item (must come second)
  $(this).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>12x</li>
  <li>24x</li>
  <li>36x</li>
  <li>48x</li>
</ul>