如何通過一個

弗里斯特檢查這個http://jsfiddle.net/jQFWM觸發ID的..這是工作完美。但我不想如何通過一個

$(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; 
    }); 
});

這樣寫。因爲我不想一次又一次地重複相同的代碼。同樣在未來，這個面板和Tiggering將是動態的，所以它會超過3個。所以我腦子裏想的是什麼，如果我可以通過調用數字來觸發它，比如說1,2,3等，那麼代碼將會很小，我猜。所以大家有什麼想法如何？像$（「＃面板+數字」）

http://jsfiddle.net/jQFWM/1這一個簡短的代碼，但不工作。

來源

2013-06-12 Accore LTD

我的建議總是給同一個類是按鈕。然後將click事件添加到該類中，並且在事件中，可以使用「this」在按鈕上切換類，並使用jquery遍歷函數查找父面板;這樣，你不必處理數字，所以...... –

這裏是我會做什麼：

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/

來源

2013-06-12 16:01:38 Joe

很酷...工作也很好。 –

你可以給參數傳遞到你的函數的抓住他們，在一個全局變量：

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

來源

2013-06-12 15:50:32 supersize

此解決方案不需要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>

的Javascript：

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

來源

2013-06-12 16:04:00 MrCode

好的，它的工作良好 –

如何通過一個

回答

相關問題