对于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");
});
答案 0 :(得分:3)
为所有应在单击时切换其他元素的元素添加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。
答案 1 :(得分: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");
});
});