JQuery hover with multiple ID's

Question

I would like to see if the working code below can be written more elegantly. I am assuming there is a way to parse out the "r" and "h" to condense it down into a function. Any help is much appreciated for learning purposes. There are no parent/sibling relationships in the ID's.

    $('#r1_1').hoverIntent(function(){
        $('#h1_1').toggleClass('vis');
    });
    $('#r1_2').hoverIntent(function(){
        $('#h1_2').toggleClass('vis');
    });
    $('#r1_3').hoverIntent(function(){
        $('#h1_3').toggleClass('vis');
    });
    $('#r1_4').hoverIntent(function(){
        $('#h1_4').toggleClass('vis');
    });
    $('#r1_5').hoverIntent(function(){
        $('#h1_5').toggleClass('vis');
    });
    $('#r2_1').hoverIntent(function(){
        $('#h2_1').toggleClass('vis');
    });
    $('#r2_2').hoverIntent(function(){
        $('#h2_2').toggleClass('vis');
    });
    $('#r2_3').hoverIntent(function(){
        $('#h2_3').toggleClass('vis');
    });
    $('#r2_4').hoverIntent(function(){
        $('#h2_4').toggleClass('vis');
    });
    $('#r2_5').hoverIntent(function(){
        $('#h2_5').toggleClass('vis');
    });
    $('#r3_1').hoverIntent(function(){
        $('#h3_1').toggleClass('vis');
    });
    $('#r3_2').hoverIntent(function(){
        $('#h3_2').toggleClass('vis');
    });
    $('#r3_3').hoverIntent(function(){
        $('#h3_3').toggleClass('vis');
    });
    $('#r3_4').hoverIntent(function(){
        $('#h3_4').toggleClass('vis');
    });

Answer 1

Instead of using ids #r, let's include in the element the attribute data-something to differentiate the elements that must have the behavior setted by the function. Using a div, for instance:

<div data-something="1_1"></div>
<div data-something="2_2"></div>

We won't need the ids with #r anymore. Considering that you already have the elements #h* we just need to put the id number inside data-something of the corresponding element, so that the function can use it:

$("div[data-something]").hoverIntent(function() {
    var idNumber = $(this).data("something");
    $('#h' + idNumber).toggleClass('vis');
});

Now, you just need to use the data-something attribute.

Answer 2

A basic function for running it could be

function hi(n1, n2) {
   var r = '#r'+n1+'_'+n2;
   var h = '#h'+n1+'_'+n2;
   $(r).hoverIntent(function() {
      $(h).toggleClass('vis');
   });
}

However, it's possible to trim this down more by creating an array, and storing both r, and h in it. The array would look something like this: var arr = ["#r"+n1+"_"+n2, "#h"+n1+"_"+n2];, and then instead of inserting r and h into the hoverIntent function, you would use arr[0] and arr[1]. If they are all meant to be run at once, you could run a nested for loop so that r1_ - r3_ would be created, and then the secondary numbers would be populated.

Answer 3

what about this?

$('.hover_intent').hoverIntent(function(){
     var id = $(this).attr( 'id' ); 
     var selector = '#' + id.replace( 'r', 'h' );
     $( selector ).toggleClass('vis');
});

The only inconvenients i see are :

• you need to add a hover_intent css class or your rx_y elements. This can be avoided with a regex selector like $('[id^=r]') (which means: select all elements whose id starts with an 'r'), but you should then use a more verbose id to avoid selecting everything that starts with an 'r'...
• selecting $(this) every time the event occurs can be bad performance-wise, especially if you have a lot of elements or if the event occurs a lot of times per second

Another option is to use a data attribute on your element :

<span class="hover_intent" data-target="#h1_1">Foo</a>
<script type="text/javascript">
  $('.hover_intent').hoverIntent( function(){
    $( $(this).data('target') ).toggleClass('vis') );
  });
</script>