Kaplar arasında geçiş yapmak için öğeye tıklayın

Question

Şu anda bir dizi tetikleyici ve hedefim var. Bir span öğesini tıklattığınızda, sonraki div, üzerinde bir geçiş yapmış bir sınıfa sahip olmalıdır. burada özgü bir vaka Tetik Üç aslında 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> 

Şu anda, benim jQuery şöyle div dışında hedef gerektiğidir.

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

Sorum iki Buraya kat edilir:

a) I ve üzerinde sonraki div

b içeren ul dışında hareket etmesi Tetikleyici 3 click olayını nasıl alabilirim) Hedefi daha akıllıca bağlamak ve bir id veya bir şey kullanarak tetiklemek için bir yolu var mı? label için bir input kimliğini hedeflemek için for'u kullanabilirsiniz. JQuery'de bir eşdeğer var mı?

Answer 1

Ben HTML'nize aşağıdaki değişikliği yapacak tasarım yaklaşımı takiben sırayla şöyle etkinlik dinleyici içinde bazı daha kolay kodlama neden olur

<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

yapabilirsiniz Kullanıldığı:

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