Javascript變量，增量函數？

Question

我有一個問題，下面的JavaScript代碼：

$("#toggleLog-1").click(function() { 
    $("#toggled-1").slideToggle("slow"); 
}); 
$("#toggleLog-2").click(function() { 
    $("#toggled-2").slideToggle("slow"); 
}); 
$("#toggleLog-3").click(function() { 
    $("#toggled-3").slideToggle("slow"); 
}); 
/// ... and many other IDs 

正如你所看到的，我想知道如何遞增的ID和緊湊我的代碼，因爲我在我的CSS文件多ID。在PHP中，我知道我將如何做到這一點（與foreach和增量功能），但我怎麼能在JavaScript中做到這一點？

Answer 1

嗯，怎麼樣：

$("[id^=toggleLog]").click(function() { 
    var idNum = this.id.split("-")[1]; 
    $("#toggled-" + idNum).slideToggle("slow"); 
}); 

Answer 2

雖然所有的點擊元素似乎符合他們的id屬性的具體約定，它會更容易和更清潔讓所有的點擊元素特定的類，並且一個data-*屬性指定了要切換哪個元素的選擇器。例如，有這樣的結構：

<div class="toggler" data-toggler="#toggled-2"></div> 
<div id="toggled-2"></div> 

，並使用此：

$(".toggler").on("click", function() { 
    var $this = $(this), 
     toggler = $this.attr("data-toggler"); 

    $(toggler).slideToggle("slow"); 
}); 

它的目標是全部由toggler類的可點擊元素。在點擊處理程序中，它查看其特定的data-toggler屬性，並通過該屬性選擇元素，在找到的任何情況下調用.slideToggle()。