凝聚重複的jQuery語句

當談到javascript和一般編程時，我非常喜歡綠色。有人可以給我一些指導如何縮短下面的代碼塊。我用一致的命名構建了前端，所以我知道它可以完成，但我不確定如何。凝聚重複的jQuery語句

$('#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"); 
});

來源

2014-04-01 Alex Chastain

簡單，使用類！ – adeneo

我不認爲這是行得通的，因爲他正在對其中許多人的不同元素執行'slideToggle'。 –

添加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。

來源

2014-04-01 22:13:00 zakangelle

我喜歡 - 基本上是Bootstrap方法。您甚至可以通過使用'[data-toggle]'選擇器而不是'toggle-control'類來進一步簡化。 – nrabinowitz

@nrabinowitz美麗。更新了我的答案。 – zakangelle

完美地工作，謝謝你！ –

答案將取決於您的標記 - 如果所有這些元素的標記相似，則可能只需要一個事件處理程序。但是考慮所有的這些東西根本不同的標記的情況下，你可以這樣做：

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

來源

2014-04-01 22:12:52 nrabinowitz

凝聚重複的jQuery語句

回答

相關問題