CSS仅将class或CSS赋予选定的元素

Question

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

Answer 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>