[英]Condense Repetitive jQuery statements
I am pretty green when it comes to javascript, and programming in general. 关于javascript和一般编程,我非常环保。 Can someone give me some direction on how to shorten the below code block.
有人可以指导我如何缩短下面的代码块。 I built the front end with consistent naming so I know it can be done, but I'm unsure how.
我使用一致的名称构建了前端,因此我知道可以做到这一点,但是我不确定如何做到。
$('#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");
});
Add a data-toggle
attribute to all elements that should toggle some other element when clicked. 将
data-toggle
属性添加到所有在单击时应切换其他元素的元素。 This attribute's value should be a reference to the element you want to fadeToggle()
: 此属性的值应为您要
fadeToggle()
的元素的引用:
Markup : 标记 :
<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 : JS :
$("[data-toggle]").on("click", function() {
var elementToToggle = $(this).data("toggle");
$(elementToToggle).fadeToggle("slow", "linear");
});
The answer is going to depend on your markup - if the markup for all these elements is similar, you might only need a single event handler. 答案将取决于您的标记-如果所有这些元素的标记都相似,则可能只需要一个事件处理程序。 But taking the case where all of these things have radically different markup, you could do:
但是假设所有这些东西的标记完全不同,则可以执行以下操作:
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");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.