Geek Answers Handbook

JQuery freeze effect

I have a bunch of li elements that I want to alternate in color using coefficients and coefficients, and then select them based on the mouse. In order not to highlight, I need to keep track of what color was odd or even. To do this, when I apply the highlight color, I first set an arbitrary attribute for it. Are there any flaws in this? Is there a better way? Here is the code:

<script type="text/javascript"> var init = function(event){ $("li:odd").css({'background-color' : '#eeeeee', 'font-weight' : 'bold'}); $("li:even").css('background-color', '#cccccc'); //initial colors setup $("li").hover( function () //hover over { var current = $(this); current.attr('old-background', current.css('background-color')); current.css('background-color', '#ffee99'); } , function() //hover out { var current = $(this); current.css('background-color', current.attr('old-background')); }) } $(document).ready(init); </script>

So is there a better way to do this?

+4
source share
4 answers

To do this, you should use addClass and removeClass, and not directly manipulate CSS.

 <style> li.hover { background-color: #ffee99 !important; } </style> <script type="text/javascript"> var init = function(event){ $("li:odd").css({'background-color' : '#eeeeee', 'font-weight' : 'bold'}); $("li:even").css('background-color', '#cccccc'); //initial colors setup $("li").hover( function () //hover over { $(this).addClass('hover'); } , function() //hover out { $(this).removeClass('hover'); }) } $(document).ready(init);

+3
source

I, using benlumley, you should use the addClass / removeClass methods.

Your CSS might look like this:

 li { font-weight: bold; } li.odd { background-color: '#eee'; } li.even { background-color : '#ccc'; } li.hover { background-color : '#ffee99'; }

Now your init function will look like

 var init = function(event) { $('li:odd').addClass('odd'); $('li:odd').addClass('even'); $('li').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); } ); }

This code has the advantage that if you want to change the display style of the list items, you can go to your CSS code and change the colors without touching your JS code!

+4
source

You can introduce a CSS class called highlighted and call current.addClass('highlighted') to add on hover and current.removeClass('highlighted') to remove the class on hover. I assume that you also add the odd and even classes to your CSS file.

 <script type="text/javascript"> var init = function(event){ //initial colors setup $("li:odd").addClass('odd'); $("li:even").addClass('even'); $("li").hover( function () //hover over { $(this).addClass('highlighted'); } , function() //hover out { $(this).removeClass('highlighted'); }) } $(document).ready(init); </script>

highlighted must be declared after even and odd classes in your file so that you can override the default colors.

+1
source

like other yo, you can also use

 $("li:odd").toggleClass("odd");

or

 $("li:even").toggleClass("odd");

if you want to change the color of the first element. (also you can use first, i think)

0
source

More articles:


All Articles