javascript - javascript代码的简化

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') 是否隐藏/显示它。