Klicken Sie auf das Element, um Container zu durchlaufen.

Question

Momentan habe ich eine Reihe von Triggern und Zielen. Wenn Sie auf eine span klicken, sollte die nächste div eine Klasse aktiviert haben. Der einzigartige Fall hier ist, dass Trigger-Drei der div tatsächlich Ziel sollte außerhalb die 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> 

Gerade jetzt, meine jQuery wie folgt aussieht.

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

Meine Frage ist hier zwei Ziele verfolgt:

a) Wie kann ich das Click-Ereignis für Trigger 3 außerhalb des enthaltenden ul und auf den nächsten div

b zu durchqueren) Gibt es eine Möglichkeit, das Ziel intelligenter zu binden und auszulösen mit Hilfe einer id oder etwas? Ich weiß, dass Sie für labelfor verwenden können, um eine input ID zu zielen. Gibt es ein Äquivalent in jQuery?

Answer 1

Ihr Design-Ansatz folgend würde ich die folgenden Änderungen an Ihrem HTML machen

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

, die wiederum in einem gewissen einfacher Codierung innerhalb Ihrer Event-Listener wie so führen würde:

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

Sie können Verwenden Sie:

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