How to create a jquery mouseover for multiple divs

问题:

Hi I am trying to group a series of mouseover events to one but I am really new to javascript and getting really confused. I have 5 buttons like the one bellow and I want to create one function to include them all. I use the class of the divs for another function not included here. I believe that I have to use the ids for the mouseover.

$('#trigger1').mouseover(function(){ 
    $('#roll1r').fadeOut('slow');
});

http://jsfiddle.net/alexnode/fCw6y/2/

I use the conditional to define which element I want to hide but I am not sure how to define the variables and pass them to the fade out function. I have tried all sort of syntax to pass it as a string but I don't understand what is the problem.

$('#trigger1, #trigger2, #trigger3').mouseover(function () {
      var roll = null;
      var that = $(this);


        if (that==="#trigger1"){roll = "$('#roll1r')";}
        else if(that==="#trigger2"){roll ="$('#roll2r')";}
        else if(that==="#trigger3"){roll = "$('#roll3r')";}
        console.log(roll);
        roll.fadeOut({
            duration:300,
           // fail: that.hide()
        });
    });

     <div class="buttoncontainer" >

          <div id="buttonbg1">
          <img id="roll1" class="translatebuttons" src="images/buttonover.png" alt="Translation games">
<img id="roll1r" class="translatebuttons" src="images/button.png" alt="Translation games">
            <div class="translatebuttons" id="tr1"></div>
            <div id="trigger1" class="translatebuttons"></div>
            </div>

          <div id="buttonbg2">
            <img id="roll2" class="translatebuttons" src="images/buttonover.png" alt="Translation games"> <img id="roll2r" class="translatebuttons" src="images/button.png" alt="Translation games">
            <div class="translatebuttons" id="tr2"></div>
            <div id="trigger2" class="translatebuttons"></div>
          </div>


          <div id="buttonbg3">
            <img id="roll3" class="translatebuttons"  src="images/buttonover.png" alt="Translation games"> <img id="roll3r" src="images/button.png" alt="Translation games">
            <div class="translatebuttons" id="tr3"></div>
            <div id="trigger3" class="translatebuttons"></div>
            </div>

      </div>

回答1:

You are looking for something like this? One way you can simplify you code with just one handler:

   $('[id^=trigger]').hover(function () { 
       var roll = $(this.id.replace(/trigger/, '#roll') + 'r');
       roll.fadeToggle({
        duration: 300
      });
   });

Fiddle

• Use startswith selector to select all triggers
• Use hover for a shortcut to mouseenter/mouseleave
• use simple regex repalce to calculate the id of respective roll
• Use fadeToggle to toggle the fading state of roll.

回答2:

Well the only problem I see right off the bat...

Is the "" around your elements, they're objects not strings...

So it should be...

if (that==="#trigger1"){roll = $('#roll1r');}
    else if(that==="#trigger2"){roll =$('#roll2r');}
    else if(that==="#trigger3"){roll = $('#roll3r');}

回答3:

There is 2 major problem in your code.

The first one is the condition. instead on doing :

that==="#trigger1"

you can use the jquery function .is() :

that.is("#trigger1")

The second one is that you are using string instead of jQuery objects. every roll should be like that :

roll = $('#roll1r');

Anyway, i cleaned up a bit your code and came back with that : http://jsfiddle.net/fCw6y/10/

回答4:

In order to make a more generic coding, you can use DOM traversing functions, depending on your page structure, here with previous since your triggers are previous siblings to the ones you want to fade.

$('#trigger1, #trigger2, #trigger3').mouseover(function () {
    var roll = $(this).prev('.translatebuttons');
    console.log(roll);
    roll.fadeOut({
        duration:300,
       // fail: that.hide()
    });
});

回答5:

$('div[id=buttonbg]').each(function() {
    $(this).find('#trigger').mouseenter(function(){
        $(this).find('#roll').fadeOut('slow');
    });
    $(this).find('#trigger').mouseleave(function(){
        $(this).find('#roll').fadeIn('slow');
    });
});