2

こんにちは、一連のマウスオーバー イベントを 1 つにグループ化しようとしていますが、JavaScript が初めてで、本当に混乱しています。以下のような 5 つのボタンがあり、それらすべてを含む 1 つの機能を作成したいと考えています。ここに含まれていない別の関数に 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

このようなものをお探しですか？ハンドラーを 1 つだけ使用してコードを簡素化する 1 つの方法:

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

フィドル

于 2013-06-22T02:14:50.180 に答える
1

より一般的なコーディングを行うために、ページ構造に応じてDOM traversing functionsを使用できます。トリガーは、フェードしたいトリガーの前の兄弟であるため、ここではpreviousを使用します。

$('#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 に答える