压缩重复性jQuery语句

Question

关于javascript和一般编程，我非常环保。 有人可以指导我如何缩短下面的代码块。 我使用一致的名称构建了前端，因此我知道可以做到这一点，但是我不确定如何做到。

$('#fd_button').on('click', function(){
    $('#fd_content').fadeToggle("slow", "linear");
});
$('#fd_content #close_btn').on('click', function(){
    $('#fd_content').fadeToggle("slow", "linear");
});
$('#fl_button').on('click', function(){
    $('#fl_content').fadeToggle("slow", "linear");
});
$('#fl_content #close_btn').on('click', function(){
    $('#fl_content').fadeToggle("slow", "linear");
});
$('#el_button').on('click', function(){
    $('#el_content').fadeToggle("slow", "linear");
});
$('#el_content #close_btn').on('click', function(){
    $('#el_content').fadeToggle("slow", "linear");
});
$('#fm_button').on('click', function(){
    $('#fm_content').fadeToggle("slow", "linear");
});
$('#fm_content #close_btn').on('click', function(){
    $('#fm_content').fadeToggle("slow", "linear");
});
$('#gf_button').on('click', function(){
    $('#gf_content').fadeToggle("slow", "linear");
});
$('#gf_content #close_btn').on('click', function(){
    $('#gf_content').fadeToggle("slow", "linear");
});
$('#fg_button').on('click', function(){
    $('#fg_content').fadeToggle("slow", "linear");
});
$('#fg_content #close_btn').on('click', function(){
    $('#fg_content').fadeToggle("slow", "linear");
});
$('#en_button').on('click', function(){
    $('#en_content').fadeToggle("slow", "linear");
});
$('#en_content #close_btn').on('click', function(){
    $('#en_content').fadeToggle("slow", "linear");
});
$('#fmn_button').on('click', function(){
    $('#fmn_content').fadeToggle("slow", "linear");
});
$('#fmn_content #close_btn').on('click', function(){
    $('#fmn_content').fadeToggle("slow", "linear");
});
$('#gfn_button').on('click', function(){
    $('#gfn_content').fadeToggle("slow", "linear");
});
$('#gfn_content #close_btn').on('click', function(){
    $('#gfn_content').fadeToggle("slow", "linear");
});

Answer 1

将data-toggle属性添加到所有在单击时应切换其他元素的元素。 此属性的值应为您要fadeToggle()的元素的引用：

标记 ：

<div data-toggle="#fd_content">Some content</div>
<div data-toggle="#fm_content">Some more content</div>
<div data-toggle="#gfn_content">Even more content</div>

JS ：

$("[data-toggle]").on("click", function() {
  var elementToToggle = $(this).data("toggle");
  $(elementToToggle).fadeToggle("slow", "linear");
});

参见DEMO 。

Answer 2

答案将取决于您的标记-如果所有这些元素的标记都相似，则可能只需要一个事件处理程序。 但是假设所有这些东西的标记完全不同，则可以执行以下操作：

var selectors = [
    ['#fd_button', '#fd_content'],
    ['#fd_content #close_btn', '#fd_content'],
    // ... etc
];

selectors.forEach(function(trigger, target) {
    $(trigger).on('click', function(){
        $(target).fadeToggle("slow", "linear");
    });
});