CSS 仅将类或 css 提供给选定的元素

debugcn 发表于 Dev

克罗斯范德

我有一组无序列表。我创建了一些使每个列表都被点击的函数，它将运行一个 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>

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

从我的草坪上离开

为了!important与 jQuery一起使用，您需要有 2 个参数。第一个参数是cssText，第二个是您要设置的文本，如此处所述

例子：

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

您也可以on直接在 javascript 中使用创建点击事件，无需将其放置在 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。