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创建click事件，而无需将其放置在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>

CSS仅将类或CSS赋予所选元素

1 个答案: