編碼這個

Question

在此頁面的更簡單的辦法：of my website

我有這個jQuery的，但它似乎有點長篇大論。

<script type="text/javascript"> 
$(document).ready(function(){ 
$("p").hide(); 
$("#lastfmrecords").hide(); 
$("h2.btn1 a").click(function(){ 
$("ol.btn1>*").toggle(400); 
}); 
$("h2.btn2 a").click(function(){ 
$("ol.btn2>*").toggle(400); 
}); 
$("h2.btn3 a").click(function(){ 
$("ol.btn3>*").toggle(400); 
}); 
$("h2.btn4 a").click(function(){ 
$("ol.btn4>*").toggle(400); 
}); 
$("h2.btn5 a").click(function(){ 
$("ol.btn5>*").toggle(400); 
}); 
    $("h2.btn6 a").click(function(){ 
$("ol.btn6>*").toggle(400); 
}); 
    $("h2.btn7 a").click(function(){ 
$("ol.btn7>*").toggle(400); 
}); 
}); 
</script> 

<h2 class="btn5"><a href="#">FAVOURITE Books</a></h2> 
    <ol class="btn5"> 
     <p>Freakonomics, Bad Science, A Brief History of Nearly Everything, 100 years of Solitude, On Chesil Beach</p> 
    </ol> 

然後，我有7個有序列表與這些名稱，沒有。 5以上（btn1 - btn7），當我點擊相應的H2標題時，它會切換。所有工作正常，但有沒有一種方法來壓縮jQuery？

Answer 1

A for循環似乎是一個明顯的解決方案。

$(document).ready(function() { 
    $('ol').hide(); 
    for (var i = 1; i <= 7; ++i) { 
    $('h2.btn' + i + ' a').click(function() { 
     $('ol.btn' + i + ' > *').toggle(400); 
    }); 
    } 
}); 

Answer 2

首先，你可以在一個div包裹h2的和你的<a> rel到類的ol你想切換

<div class="wrapper"> 
    <h2><a rel="btn1"> </a><ol class="btn1">...</ol> 
    ... 
    <h2><a rel="btn7"> </a><ol class="btn7">...</ol> 
</div> 

然後做如下，請注意您還可能希望通過傳入event對象作爲函數參數來防止瀏覽器滾動到頂部並呼叫.preventDefault()

$('.wrapper h2 a').click(function(e) { 
    e.preventDefault(); 
    $('ol.' + $(this).attr('rel') + ' p').toggle(400); 
}); 

編輯： 如果您願意讓您的佈局是，你也可以這樣做：

$('h2[class^=btn] > a').click(function(e) { 
    e.preventDefault(); 
    $('ol.' + $(this).parent().attr('class') + ' > p').toggle(400); 
});