如何逐个触发ID

Question

首先检查这个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等，那么can代码将会很小，我猜。伙计们，你们知道怎么做吗？如$("#panel+number")

http://jsfiddle.net/jQFWM/1这一个简短的代码，但不能工作。

Answer 1

这就是我要做的：

JS：

$(".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

此解决方案不需要ID或数字链接。这些元素通过父子ID相关，而不是硬编码的ID。

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>

Javascript：

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

Answer 3

您可以在函数中提供参数，并在全局变量中获取它们：

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

并编写一个函数：

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