Question

首先发布在这个伟大的网站！

我想减少以下代码的数量，特别是因为我将来需要添加更多部分 - 我确信必须有一个简单的方法，但我只是没有看到它。谢谢你的帮助！

$(document).ready(function(){

    $(function(){
            $('#iqdrive').click(
                    function(){
                                    $('#iqdrive-cont').show();
                    });
    });
    $(function(){
            $('#optiwave').click(
                    function(){
                                    $('#optiwave-cont').show();
                    });
    });     
    $(function(){
            $('#vario').click(
                    function(){

                                    $('#vario-cont').show();
                    });
    });     
    $(function(){
            $('#autostain').click(
                    function(){
                                    $('#autostain-cont').show();
                    });
    });     
    $(function(){
            $('#autoload').click(
                    function(){
                                    $('#autoload-cont').show();
                    });

    });

}）;

Answer 1

首先，您不需要嵌套document.ready个函数（所有$(function() {都是冗余的，因为它等同于document.ready）。并简化您的代码：

$(function() {
    $('#iqdrive, #optiwave, #vario, #autostain, #autoload').click(function() {
        $('#' + this.id + '-cont').show();
    });
});

Answer 2

所有内部$(function())调用都是不必要的，因为$(function())是$(document).ready(function())的别名。您的示例显示了相同类型任务的大量重复;这很容易巩固。

$(document).ready(function(){
  $('#iqdrive, #optiwave, #vario, #autostain, #autoload').click(function(){
    $($(this).attr("id") + "-cont").show();
  });
});

这样做是为了注册具有任何这些ID的元素，点击后，获取被点击元素的ID，追加-cont，并将其用作选择器以获取一组元素秀。

如何减少我重复的jQuery代码

2 个答案: