Question

下面是我的代码，它显示了一个包含多个触发器和目标的非常简单的场景。单击div.trigger 1将更改div.target 1的颜色，单击div.trigger 2将更改div.target 2的颜色。

我的实际html要复杂得多，所以我不需要使用一个next（），而是需要使用很多方法来遍历DOM。在这种情况下是否有其他方法来解决问题？

如果代码更健壮，那么如果触发器和目标元素的相对html结构发生变化，那么它仍然可以工作。例如，如果有一个类似于eq函数的东西使第一个div.trigger目标为第一个div.target，第二个div.trigger就是第二个div.target而不管页面其余部分的html。

 <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/

谢谢

Answer 1

...例如，如果有像eq函数那样使第一个div.trigger目标成为第一个div.target，而第二个div.trigger就是第二个div.target ......

试试这段代码：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());
   });
});

Answer 2

您可以使用data存储对目标元素的引用。

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

复杂DOM遍历的最简单方法是什么？

2 个答案: