Question

是否可以将以下代码压缩成几行？ 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); 
        });
 });

Answer 1

使用类而不是id或将所有类似的类合并为：

$("#object1, #object2, #object3, ...").click(function() { ... });

然后，只需单击一下，检查对象.is(':visible')是否隐藏/显示它。

Answer 2

我认为可以缩短为：

$('#_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 mockup

Answer 3

$(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以显示它正常工作！

简化javascript代码

3 个答案: