javascript代码的简化
javascript代码的简化
提问于 2012-03-12 18:09:46
有没有可能把下面的代码压缩成几行？对于8个不同的事件，有类似的_jq_overlay_x和_jq_overlay_y语句。我认为这将更好地压缩这些行，这将更有利于优化。
提前感谢
$(document).ready(function(){
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$('#_jq_overlay1').fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$('#_jq_overlay1').fadeIn(500);
});
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$('#_jq_overlay2').fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$('#_jq_overlay2').fadeIn(500);
});
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$('#_jq_overlay3').fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$('#_jq_overlay3').fadeIn(500);
});
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$('#_jq_overlay4').fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$('#_jq_overlay4').fadeIn(500);
});
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$('#_jq_overlay5').fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$('#_jq_overlay5').fadeIn(500);
});
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$('#_jq_overlay6').fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$('#_jq_overlay6').fadeIn(500);
});
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$('#_jq_overlay7').fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$('#_jq_overlay7').fadeIn(500);
});
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$('#_jq_overlay8').fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$('#_jq_overlay8').fadeIn(500);
});
});回答 3
Stack Overflow用户
回答已采纳
发布于 2012-03-12 18:18:49
$(document).ready(function(){
var elms=[];
for (var i=1; i<=8;i++) {
elms.push($('#_jq_overlay'+i)[0]);
}
$('#_jq_overlay_x').click( function(event) {
event.preventDefault();
$(elms).fadeOut(500);
});
$('#_jq_overlay_y').click( function(event) {
event.preventDefault();
$(elms).fadeIn(500);
});
});这里有一个FIDDLE来展示它的工作！
Stack Overflow用户
发布于 2012-03-12 18:13:05
要么使用类而不是ids，要么将所有相似的类组合成类似的东西：
$("#object1, #object2, #object3, ...").click(function() { ... });然后，只需单击并检查对象是否为.is(':visible')以隐藏/显示它。
Stack Overflow用户
发布于 2012-03-12 18:21:28
我认为它可以缩短为：
$('#_jq_overlay_x,#_jq_overlay_y').click( function(event) {
event.preventDefault();
for (var i=1;i<9;(i=i+1)){
$('#_jq_overlay'+i)[(/_y/i.test(this.id) ? 'fadeIn' : 'fadeOut')](500);
}
});请参阅this jsfiddle模型
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9665117
复制相关文章
相似问题
腾讯云开发者
