2

嗨，我正在尝试将一系列鼠标悬停事件归为一个，但我对 javascript 真的很陌生，而且真的很困惑。我有 5 个按钮，比如下面的一个，我想创建一个函数来将它们全部包含在内。我将 div 的类用于此处未包含的另一个功能。我相信我必须使用鼠标悬停的 id。

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

5 回答 5

3

你正在寻找这样的东西吗？一种仅使用一个处理程序即可简化代码的方法：

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

小提琴

  • 使用startswith选择器选择所有触发器
  • 使用悬停作为 mouseenter/mouseleave 的快捷方式
  • 使用简单的正则表达式 repalce 计算相应卷的 id
  • 使用fadeToggle切换滚动的淡入淡出状态。
于 2013-06-22T02:14:50.180 回答
1

您的代码中有两个主要问题。

第一个是条件。而不是做：

that==="#trigger1"

您可以使用 jquery 功能.is()：

that.is("#trigger1")

第二个是您使用的是字符串而不是 jQuery 对象。每个都roll应该是这样的：

roll = $('#roll1r');

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

于 2013-06-22T02:15:15.173 回答
1

为了进行更通用的编码，您可以使用DOM 遍历函数，具体取决于您的页面结构，这里使用以前的，因为您的触发器是您想要淡入淡出的触发器的先前兄弟。

$('#trigger1, #trigger2, #trigger3').mouseover(function () {
    var roll = $(this).prev('.translatebuttons');
    console.log(roll);
    roll.fadeOut({
        duration:300,
       // fail: that.hide()
    });
});
于 2013-06-22T02:19:37.480 回答
1

好吧，我立即看到的唯一问题...

你的元素周围的 "" 是不是字符串的对象......

所以应该是...

if (that==="#trigger1"){roll = $('#roll1r');}
    else if(that==="#trigger2"){roll =$('#roll2r');}
    else if(that==="#trigger3"){roll = $('#roll3r');}
于 2013-06-22T02:13:51.247 回答
-1 
$('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');
    });
});
于 2017-04-08T14:48:22.257 回答