動的div IDの使い方ID

Question

ここでは非常に近い回答がありますが、私のjQueryの知識は非常に似ているため、関連性を持たせることはできません。だから私は先に進んで尋ねます。皆さんが気にしないことを願っています！

だから、ここスクリプトは次のとおりです。

$("#button1").mouseenter(function(){ 
    $("#a1").fadeIn('100', function() { }); 

    $("#button1").mouseleave(function(){ 
     $("#a1").fadeOut('100', function() {}); 
    }); 
}); 

私はmouseenterに、私は、対応する矢印をアクティブにする、複数のボタンがあります。

各ペアのスクリプトを繰り返すのではなく、#button2から#arrow2などです。$()ビットにちょっとした変数を入れて動作させるにはどうすればいいですか？シンプルに聞こえますが、私の緻密さが見えない方法があると確信しています。

これは（それを要求した人のための）HTMLである：このような

<div id="buttons"> 
    <p><a href="#"><img src="images/1.png" name="button1" id="button1" /></a></p> 
    <p><a href="#"><img src="images/2.png" name="button2" id="button2" /></a></p> 
    <p><a href="#"><img src="images/3.png" name="button3" id="button3" /></a></p> 
    <p><a href="#"><img src="images/4.png" name="button4" id="button4" /></a></p> 
    <p><a href="#"><img src="images/5.png" name="button5" id="button5" /></a></p> 
    </div> 

<div class="arrow" id="a1"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a2"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a3"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a4"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a5"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a6"><img src="images/arrow.png" width="747" height="75" /></div> 

Answer 1

解決策の縮尺は変わりません。

domの各要素にイベントハンドラを割り当てています。

これは私がjQueryで持っているビーフの1つです。これらのことを間違って行い、途中で足に自分を撃ち込むのはとても簡単です。

イベント委任が必要です。

本質的には、ドームツリーではるかに高いイベントハンドラを持ち、泡立つイベントを待ち受けるという概念です。したがって、マウスイベントをリスト上で処理することができます。リストアイテム自体ではなく、ドキュメント上で、単一のイベントハンドラで処理します。私は実際にはボタンと矢印の間のリンクを取得するには、IDを使用してい

$('body').on('mouseenter', '#buttons img', function (e) { 
    $('#a' + $(this).attr('id').slice(-1)).fadeIn(300); 
}); 

$('body').on('mouseleave', '#buttons img', function (e) { 
    $('#a' + $(this).attr('id').slice(-1)).fadeOut(300); 
}); 

お知らせ：

はこのような何かをする必要がありますhttp://api.jquery.com/on/

あなたのコードを見てみましょう。idのすべてを一緒にスキップして、その要素がその親要素に持つインデックスを調べるだけでよいでしょう。

の作業の例では、ここで見つけることができます：http://jsfiddle.net/GNs44/1/

Answer 2

何かあなたが始めるかもしれません：

$("[id*=button]").mouseenter(function(){ 
    var t = $(this), 
     idnum = t.slice(-1); 

    $("[id=a" + idnum + "]").fadeIn('100', function() { 
    }); 
}).mouseleave(function(){ 
    var t = $(this), 
     idnum = t.slice(-1); 

    $("[id=a" + idnum + "]").fadeOut('100', function() { 
    }); 
}); 

Answer 3

ではなくIDを使用して、ボタンをクラスを与えます。

HTML：

<button id="button1" class="hoverbutton" /> 
<button id="button2" class="hoverbutton" /> 

のjQuery：

$(".hoverbutton").mouseenter(function() { 
     $(".arrowclass").fadeIn('100', function() { }); 
    }); 

$(".hoverbutton").mouseleave(function() { 
     $(".arrowclass").fadeOut('100', function() { }); 
    }); 

Answer 4

$(".buttonClass").mouseenter(function(){ 
    $(this).siblings('.aClass').fadeIn('100', function() { }); 

    $(".buttonClass").mouseleave(function(){ 
     $(this).siblings('.aClass').fadeOut('100', function() {}); 
    }); 
}); 

あなたがこれを使用する（または同様、代わりの兄弟は、適切なセレクタを使用）と言及したクラス（AClassはとbuttonClassを追加することができます）をコンポーネントに追加します）。

この作品例：

<div> 
<button class="buttonClass">Description</button> 
<a class="aClass">Description</a> 
</div> 

注意ボタンを置くとotherwiese ALL <a>タグがフェードイン/アウトされますので、それはdivタグ内の「グループ」、それらを、することが重要だということ。