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保持简单易读。

jQuery DRY Coding with .toggle / event

2 个答案: