如何減少我重複的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，並把它作爲選擇來獲得一組元素，以顯示。