1

以下は、複数のトリガーとターゲットを持つ非常に単純なシナリオを示す私のコードです。div.trigger 1をクリックすると、div.target 1の色が変更され、div.trigger 2をクリックすると、div.target2の色が変更されます。

私の実際のhtmlははるかに複雑なので、next（）を1つだけ使用するのではなく、DOMをトラバースするために多くのメソッドを使用する必要があります。この状況で問題に取り組む他の方法はありますか？

また、トリガー要素とターゲット要素の相対的なhtml構造が変更されても機能するように、コードがより堅牢であると便利です。たとえば、ページの残りの部分のhtmlに関係なく、1番目のdiv.triggerが1番目のdiv.targetをターゲットにし、2番目のdiv.triggerが2番目のdiv.targetをターゲットにするeq関数のようなものがある場合。

 <div class="trigger">trigger 1</div>
 <div class="target">target 1</div>
 <div class="trigger">trigger 2</div>
 <div class="target">target 2</div>

 ​$(document).ready(function(){
     $('.trigger').click(function(){
         $(this).next().css('background-color','red');        
     }); 
 });​

http://jsfiddle.net/5tcNq/2/

ありがとう

4

2 に答える 2

1

...たとえば、1番目のdiv.triggerが1番目のdiv.targetをターゲットにし、2番目のdiv.triggerが2番目のdiv.targetをターゲットにするeq関数のようなものがある場合...

このコードを試してください：http：//jsfiddle.net/JGyc9/

関連するjs：

$(function() {

   var tr = $('.trigger'),
       tg = $('.target');

   tr.on('click', function() {
      var i = tr.index(this);
      /* tg.eq(i) is the target */


      console.log("your trigger ", $(this).text());
      console.log("your target ", tg.eq(i).text());
   });
});
于 2012-08-06T09:17:42.407 に答える
1

データを使用して、ターゲット要素への参照を保存できます。

<div id="trigger1" class="trigger" data-target="#target1">trigger 1</div>
<div id="target1" class="target">target 1</div>

​$(document).ready(function(){
     $('.trigger').click(function(){
         var $target = $($(this).data('target'));
         $target.css('background-color', 'red');
     });
});​
于 2012-08-06T09:17:53.727 に答える