-1

I have group of unordered list. I have create some function that make every list is clicked, it will run a JS Function. Now I want to add some css, if the list is clicked, its bg color will changed. My code so far:

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>

Unfortunately it doesn't works. I have tried to change it to a class, but still not working. Anyone can help me? Thanks

feeela
  • 29,399
  • 7
  • 59
  • 71
Cross Vander
  • 2,077
  • 2
  • 19
  • 33

1 Answers1

1

In order to use !important with jQuery, you need to have 2 parameters. The first parameter is cssText, the second is the text you want to set as explained here

Example:

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

You can also create the click event using on directly in the javascript, no need to place it on the html element.

$('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>
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338