如何创建通过ID多个div一个jQuery鼠标悬停？(How to create a jquery

你好我试图将一系列的鼠标悬停事件的一个，但我真的很新的JavaScript和变得非常混乱。 我有5个按键像一个波纹管，我想创建一个功能，包括他们所有。 我用的是类的div对这里不包括其他功能。 我认为，我必须使用IDS鼠标悬停。

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

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

我使用条件来定义我想隐藏哪个元素，但我不知道如何定义变量，并将它们传递给淡出功能。 我曾尝试过各种语法把它作为一个字符串，但我不明白是什么问题。

$('#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>

Answer 1:

您正在寻找这样的事情？ 一种方法可以简化你只有一个处理程序代码：

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

小提琴

• 使用startswith选择器选择所有触发器
• 使用悬停 ，以便快速进入的MouseEnter /鼠标离开
• 使用简单的regex repalce来计算各自的铸辊的id
• 使用fadeToggle切换滚动的衰落状态。

Answer 2:

那么唯一的问题，我看到了蝙蝠...

是“”在你的元素，他们的对象不是字符串...

因此，它应该是...

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

Answer 3:

有一个在你的代码的2大问题。

第一种是条件。 而不是在做：

that==="#trigger1"

您可以使用jQuery的功能.is()

that.is("#trigger1")

第二个是，你正在使用的不是jQuery的对象的字符串。 每roll应该是这样的：

roll = $('#roll1r');

无论如何，我清理了一下你的代码，带回来的是： http://jsfiddle.net/fCw6y/10/

Answer 4:

为了使一个更通用的编码，就可以使用DOM遍历功能 ，这取决于你的页面结构，这里与以往因为你的触发器是以前的兄弟姐妹要褪色的。

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

Answer 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');
    });
});

文章来源: How to create a jquery mouseover for multiple divs by id?