jQuery DRY Coding with .toggle/event

Question

這是我第一次嘗試使用jQuery，並且非常滿意它的工作方式，但是我有一些冗餘的代碼，我不能幫助您感覺可以整合。有沒有DRY方法如下功能？：

<script> 
// Button toggles div 
$("#first-button").click(function(){ 
    $("#first-div").toggle(); 
}); 

$("#second-button").click(function(){ 
    $("#second-div").toggle(); 
}); 

$("#third-button").click(function(){ 
    $("#third-div").toggle(); 
}); 

// if click not on button or div then hide div 
$(document).on('click', function(event) { 
    if (!$(event.target).closest('#first-button, #first-div').length) { 
     $('#first-div').hide(); 
    } 
}); 

$(document).on('click', function(event1) { 
    if (!$(event1.target).closest('#second-button, #second-div').length) { 
     $('#second-div').hide(); 
    } 
}); 

$(document).on('click', function(event2) { 
    if (!$(event2.target).closest('#third-button, #third-div').length) { 
     $('#third-div').hide(); 
    } 
}); 
</script> 

Answer 1

試試這個：

function make_toggler(button_selector, toggle_selector){ 
$(button_selector).click(function(){ 
    $(toggle_selector).toggle(); 
}); 
$(document).on('click', function(event) { 
    if (!$(event.target).closest(button_selector+", "+toggle_selector).length) { 
     $(toggle_selector).hide(); 
    } 
}); 
} 

make_toggler("#first-button", "#first-div"); 
make_toggler("#second-button", "#second-div"); 
make_toggler("#third-button", "#third-div"); 

Answer 2

如果您的文檔以一致的方式佈局（即，如果每個按鈕和DIV同樣如相關HTML），你可以簡單地給他們一個類，並將jQuery應用到它。

說出目標的div立即兄弟你的按鈕後：

$('.toggler').click(function(){ 
    $(this).next('.toggle').toggle(); 
}) 

使用類和HTML關係中，你可以保持你的HTML和你的jQuery開發的簡單性和可讀性。