1

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

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

如果代码更健壮，这样如果触发器和目标元素的相对 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/

谢谢

4

2 回答 2

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());
   });
});
于 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 回答