Question

Let me start by saying that this is working correctly, but I know it’s not the most efficient way of coding it and I’m lacking the knowledge / understanding as to how to do this.

For this specific problem, i have 8 different events that are using a mouseover / mouseout function where it is hiding other classes that aren’t the said hover. I’m curious as to have it work for say an infinite amount of events with just a simple block of code.

Any help would be greatly appreciated. Here is my code thus far…

function hoverBar() {

     $(".song1result").mouseover(function(){
            $('.barReadout').not('.bar1').fadeTo('fast', 0.1, function() {});
        }).mouseout(function(){
            $('.barReadout').not('.bar1').fadeTo('fast', 1.0, function() {});
    });

         $(".song2result").mouseover(function(){
            $('.barReadout').not('.bar2').fadeTo('fast', 0.1, function() {});
        }).mouseout(function(){
            $('.barReadout').not('.bar2').fadeTo('fast', 1.0, function() {});
    });

         $(".song3result").mouseover(function(){
            $('.barReadout').not('.bar3').fadeTo('fast', 0.1, function() {});
        }).mouseout(function(){
            $('.barReadout').not('.bar3').fadeTo('fast', 1.0, function() {});
    });

     $(".song4result").mouseover(function(){
            $('.barReadout').not('.bar4').fadeTo('fast', 0.1, function() {});
        }).mouseout(function(){
            $('.barReadout').not('.bar4').fadeTo('fast', 1.0, function() {});
    });

         $(".song5result").mouseover(function(){
            $('.barReadout').not('.bar5').fadeTo('fast', 0.1, function() {});
        }).mouseout(function(){
            $('.barReadout').not('.bar5').fadeTo('fast', 1.0, function() {});
    });

         $(".song6result").mouseover(function(){
            $('.barReadout').not('.bar6').fadeTo('fast', 0.1, function() {});
        }).mouseout(function(){
            $('.barReadout').not('.bar6').fadeTo('fast', 1.0, function() {});
    });

         $(".song7result").mouseover(function(){
            $('.barReadout').not('.bar7').fadeTo('fast', 0.1, function() {});
        }).mouseout(function(){
            $('.barReadout').not('.bar7').fadeTo('fast', 1.0, function() {});
    });

         $(".song8result").mouseover(function(){
            $('.barReadout').not('.bar8').fadeTo('fast', 0.1, function() {});
        }).mouseout(function(){
            $('.barReadout').not('.bar8').fadeTo('fast', 1.0, function() {});
    });
}

Thanks!! Matt

Edit:

I was lead to the correct answer from Shad’s response although it required a bit of tinkering.

Here’s my working solution:

function hoverBar2() {
    $('.songresult').mouseover(function(){
    var ID=$(this).attr('id').replace('#','');
    var ID2 = ID.replace('res','');

   $('.barReadout').not('#bre' + ID2).fadeTo('fast', 0.1, function() {}); 
}).mouseout(function(){
             var ID=$(this).attr('id').replace('#bre','');
        ///  alert(ID);
   $('.barReadout').not('#bre' + ID).fadeTo('fast', 1.0, function() {}); 
    });



}

Answer 1

If you have control of how the page content is rendered, then I would recommend moving the identifying numbers out of the classes and into the ids.
e.g.

<div class="songresult" id="res1"></div>
<div class="barReadout" id="bre1"></div>

This will allow you to write one block of code for all instances:

$('.songresult').mouseover(function(){
    var ID=$(this).attr('id').replace(/\D/g,'');
   $('.barReadout').not('#bre' + ID).fadeTo('fast', 0.1, function() {}); 
});