如何减少我重复的jQuery代码

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，并把它作为选择来获得一组元素，以显示。