點擊元素遍歷容器

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");