点击元素遍历容器

Question

现在我有一堆触发器和目标。当你点击一个span时，下一个div应该有一个类切换它。 独特的情况下这里是触发三实际上应该针对div外的ul

<ul> 
    <li> 
     <span class="trigger">Trigger 1</span> 
     <div class="target">Target to reveal when I press Trigger 1</div> 
    </li> 
    <li> 
     <span class="trigger">Trigger 2</span> 
     <div class="target">Target to reveal when I press Trigger 2</div> 
    </li> 
    <li> 
     <span class="trigger">Trigger 3</span> 
    </li> 
</ul> 

<div class="target">Target to reveal when I press Trigger 3</div> 

现在，我的jQuery看起来是这样的。

var trigger = ".trigger"; 
var recipient = ".target"; 

$(trigger).click(function(e) { 
    e.stopPropagation(); 
    if ($(recipient).hasClass("open")){ 
    $(trigger).not(this).next(recipient).removeClass("open"); 
    } 
    if($(trigger).hasClass("active")){ 
    $(trigger).not(this).removeClass("active"); 
    } 
    $(this).next(recipient).toggleClass("open"); 
    $(this).toggleClass("active"); 
}); 

我的问题是双重的位置：

一）我怎样才能获得的点击事件触发3到含ul外遍历和到下一个div

b ）有没有办法更智能地绑定目标和触发器使用id什么的？我知道，对于label，您可以使用for来定位input ID。在jQuery中是否存在等价物？

Answer 1

按照你设计的方法，我将作出以下修改你的HTML

<ul> 
    <li> 
     <span class="trigger" data-target-id="target-1">Trigger 1</span> 
     <div id="target-1" class="target">Target to reveal when I press Trigger 1</div> 
    </li> 
    <li> 
     <span class="trigger" data-target-id="target-2">Trigger 2</span> 
     <div id="target-2" class="target">Target to reveal when I press Trigger 2</div> 
    </li> 
    <li> 
     <span class="trigger" data-target-id="target-3">Trigger 3</span> 
    </li> 
</ul> 

<div id="target-3" class="target">Target to reveal when I press Trigger 3</div> 

这反过来会导致像这样的事件监听器中的一些容易编码：

var trigger = ".trigger"; 
var recipient = ".target"; 

$(trigger).click(function(e) { 
    e.stopPropagation(); 
    recipient = '#' + $(this).attr('data-target-id'); 

    /* - Code that modifies classes down here - */ 

}); 

Answer 2

你可以使用方法：

var target = $(this).next(recipient); 
if (target.length == 0) { // reached the end of this div 
    target = $(this).closest('ul').next(recipient); 
} 
target.toggleClass("open");