javascript - 压缩重复的 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 .