How to shorten the script?

$('span.class_1').hover(function(){ $('div.class_1').fadeToggle(); }); $('span.class_2').hover(function(){ $('div.class_2').fadeToggle(); }); $('span.class_3').hover(function(){ $('div.class_3').fadeToggle(); }); // И так далее... до 60 штук

UPD : In general, I have a <li> with nested span and div . When I hover over a span this li I need to display a div .

  • 3
    can it be easier to make normal markup instead of a heap of numbered classes? - Alexey Shimansky
  • It would be nice to understand why this is done. Now you have a typical indocode and it will not cease to be such as in the cycle of numerical suffixes of classes. It would be more competent to set the connection between the corresponding span and div using data-attributes or by searching for the corresponding element within the parent - tutankhamun
  • Well, as it turned out (judging by the update with li, span and div) - all these classes are not needed at all. You just need a little deeper development of jquery functions and their use (see the answer tutankhamun) - Alexey Shimansky

1 answer 1

Now, when we know about span and div , nested in li get this construction:

 $('li span').hover(function() { $(this).closest('li').find('div').fadeToggle(); });

To avoid misunderstandings, use classes instead of span and div

  • Perfect! Thanks to all! - Frontendman