ID를 하나씩 트리거하는 방법

Question

프리스트 체크 this http://jsfiddle.net/jQFWM .. 이것은 완벽하게 작동합니다. 하지만 난 싶지 않아

$(document).ready(function(){ 

    $(".btn-slide").click(function(){ 
     $("#panel-1").slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
    }); 

    $(".btn-slide2").click(function(){ 
     $("#panel-2").slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
    }); 
    $(".btn-slide3").click(function(){ 
     $("#panel-3").slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
    }); 
}); 

그런 식으로 쓰십시오. 나는 같은 코드를 반복해서 반복하고 싶지 않기 때문에. 또한 미래에이 패널과 트리거링은 동적이 될 것이므로 3 이상이 될 것입니다. 그래서 숫자를 호출하여 트리거 할 수 있다면 1, 2, 3 등으로 말하면 내 생각에 작은 것입니다. 얘들 아 어떻게 생각해? like $ ("# panel + number")

http://jsfiddle.net/jQFWM/1이 짧은 코드는 작동하지만 작동하지 않습니다.

Answer 1

내가 어떻게 할 것인지입니다 :

$(".combtn a").click(function (e) { 
    e.preventDefault(); 
    $("#panel-" + $(this).data('panel')).slideToggle("slow"); 
    $(this).toggleClass("active"); 
}); 

$('.btn-slide').click(function (e) { 
    e.preventDefault(); 
    $(this).closest('.panbox').slideToggle("slow"); 
    $(".combtn a").removeClass("active"); 
}); 

HTML :

<div class="combtn"><a href="#" data-panel="1">panel 1</a> 
<div class="combtn"><a href="#" data-panel="2">panel 2</a> 
<div class="combtn"><a href="#" data-panel="3">panel 3</a> 

패널 닫기 :

<a href="#" class="btn-slide">close</a> 

이 패널 번호를 저장하는 data-* 속성을 사용합니다. 추가 한 모든 패널에 대해 추가 이벤트 나 클래스 이름을 추가 할 필요가 없도록 클래스를 단순화했습니다. 여기

가 노력하고 있습니다 : http://jsfiddle.net/jQFWM/2/

Answer 2

당신이 당신의 함수에 인수를 제공하는 A 전역 변수에서 그들을 잡아 수 있습니다 : 함수

<a class="btn-slide1" href="#" onclick="toggler('panel-1');">Click me for 1</a> 
<a class="btn-slide2" href="#" onclick="toggler('panel-2');">Click me for 2</a> 
<a class="btn-slide3" href="#" onclick="toggler('panel-3');">Click me for 3</a> 

및 쓰기 :

JS를 : 여기에

var currentpanel; 
function toggler(e){ 
    currentpanel = $('#'+e); 
    currentpanel.slideToggle("slow"); 
    currentpanel.toggleClass("active"); 
    return false; 
}); 

Answer 3

이 솔루션은 더 ID 또는 숫자 링크를 필요로하지 않는다. 요소는 하드 코딩 된 ID가 아닌 부모 - 자식으로 관련됩니다.

Demo

HTML :

<div class="combtn"><a href="#" class="btn-slide">panel 1</a> 
    <div id="panel-1" class="panbox"> testing panle 1 
     <p><a href="#" class="btn-slide close">close</a></p> 
    </div> 
</div> 

<div class="combtn"><a href="#" class="btn-slide">panel 2</a> 
    <div id="panel-2" class="panbox"> testing panle 2 
     <p><a href="#" class="btn-slide close">close</a></p> 
    </div> 
</div> 

<div class="combtn"><a href="#" class="btn-slide">panel 3</a> 
    <div id="panel-3" class="panbox"> testing panle 3 
     <p><a href="#" class="btn-slide close">close</a></p> 
    </div> 
</div> 

자바 스크립트 :

내가 그 버튼에 항상 같은 클래스를주고 제안 무엇

$(document).ready(function(){ 
    $(".btn-slide").click(function(){ 
     $(this).parents('.combtn').find('.panbox').slideToggle("slow"); 
     $(this).toggleClass("active"); 
     return false; 
    }); 
});