使用 .toggle/event 进行 jQuery DRY 编码

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