如何避免重複調用javascript函數

以下javascript具有getAjax函數。這是在html表單中調用每個鼠標選擇事件。我必須在每個事件中調用相同的函數。當我想修改getAjax函數時，必須爲所有事件做。有沒有什麼辦法讓getAjax函數保持在一個地方，並在每個鼠標事件中調用。如何避免重複調用javascript函數

注：所有選擇元素都在同一個容器

<script type = "text/javascript" > 
 
    $(document).ready(function() { 
 
    var age1 = 21; 
 
    var age2 = 35; 
 
    var salary = 10000; 
 
    var width = 410; 
 
    var height = 510; 
 
    getAjax(ajaxUrl, salary, age1, age2, width, height); 
 
    $("#age1").change(function() { 
 
     age1 = parseInt($(this).val()); 
 
     getAjax(ajaxUrl, salary, age1, age2, width, height); 
 
    }); 
 
    $("#age2").change(function() { 
 
     age2 = parseInt($(this).val()); 
 
     getAjax(ajaxUrl, salary, age1, age2, width, height); 
 
    }); 
 
    $("#salary").change(function() { 
 
     salary = parseInt($(this).val()); 
 
     getAjax(ajaxUrl, salary, age1, age2, width, height); 
 
    }); 
 
    $("#width").change(function() { 
 
     width = parseInt($(this).val()); 
 
     getAjax(ajaxUrl, salary, age1, age2, width, height); 
 
    }); 
 
    $("#height").change(function() { 
 
     height = parseInt($(this).val()); 
 
     getAjax(ajaxUrl, salary, age1, age2, width, height); 
 
    }); 
 
    }); 
 

 
function getAjax(URL, salary, age1, age2, width, height) { 
 
    $.ajax({ 
 
    url: URL, 
 
    data: { 
 
     sala: salary, 
 
     age1: age1, 
 
     age2: age2, 
 
     het1: width, 
 
     het2: height 
 
    }, 
 
    dataType: "html", 
 
    type: "POST", 
 
    success: function(retdata) { 
 
     $("#data1").html(retdata); 
 
    } 
 
    }); 
 
} </script>

來源

2016-08-11 Geeth Welagedara

如果所有的選擇元素在同一容器中，我只是使用父容器上的一個事件處理程序，並讓改變事件冒泡吧。如果您確實需要對每個選擇單獨更改處理程序，請在循環中創建它們，因爲除了要更新的變量之外，更改函數都是相同的。 – Shilly

你可以在像這樣的元素中放置onchange函數並相應地傳遞值。 –

@Shilly yes所有select元素都在同一個容器中。 –

您可以選擇結合起來，你可以重寫的變量，也許到一個對象，這讓一切更加緊湊。如果你改變了getAjax功能與物體發生工作太

$(function() { 
    var data = { 
     age1 : 21, 
     age2 : 35, 
     salary : 10000, 
     width : 410, 
     height : 510 
    }; 

    getAjax(ajaxUrl, data.salary, data.age1, data.age2, data.width, data.height); 

    $("#age1, #age2, #salary, #width, #height").change(function() { 
     data[$(this).attr("id")] = parseInt($(this).val()); 
     getAjax(ajaxUrl, data.salary, data.age1, data.age2, data.width, data.height); 
    }); 
});

更妙的是。這將爲您節省更多的代碼。

$(function() { 
    var data = { 
     age1 : 21, 
     age2 : 35, 
     salary : 10000, 
     width : 410, 
     height : 510 
    }; 

    getAjax(ajaxUrl, data); 

    $("#age1, #age2, #salary, #width, #height").change(function() { 
     data[$(this).attr("id")] = parseInt($(this).val()); 
     getAjax(ajaxUrl, data); 
    }); 
}); 

function getAjax(URL, data) { 
    $.ajax({ 
     url: URL, 
     data: data, 
     dataType: "html", 
     type: "POST", 
     success: function(retdata) { 
      $("#data1").html(retdata); 
     } 
    }); 
}

來源

2016-08-11 14:23:05 eisbehr

另外，你也可以在所有html元素上放置相同的類，以便將jQuery更加壓縮爲像'$（「。person」）。change（function（）{...}）;' –

@eisbehr根據我的JS我可以在PHP頁面中訪問'薪水'作爲'$ salary = $ this-> input-> post（'sala'）; '。你傳遞的不是變量，而是整個數組。你能解釋一下如何訪問你已經作爲數組'數據'傳遞的php代碼中的各個值。 –

確實如此。只要將'sala''換成''salary''。和vor het1和het2一樣。就這樣。 @GeethWelagedara – eisbehr

種效率低下，這並不重要，但你只有一個事件監聽器在代碼中。

<script type = "text/javascript" > 
 
    $(document).ready(function() { 
 
    var age1 = 21; 
 
    var age2 = 35; 
 
    var salary = 10000; 
 
    var width = 410; 
 
    var height = 510; 
 
    getAjax(ajaxUrl, salary, age1, age2, width, height); 
 
    $("#age1,#age2,#salary,#width,#height").change(function() { 
 
     age1 = parseInt($('#age1').val()); 
 
     age2 = parseInt($('#age2').val()); 
 
     salary = parseInt($('#salary').val()); 
 
     width = parseInt($('#width').val()); 
 
     height = parseInt($('#height').val()); 
 
     getAjax(ajaxUrl, salary, age1, age2, width, height); 
 
    }); 
 
    }); 
 

 
function getAjax(URL, salary, age1, age2, width, height) { 
 
    $.ajax({ 
 
    url: URL, 
 
    data: { 
 
     sala: salary, 
 
     age1: age1, 
 
     age2: age2, 
 
     het1: width, 
 
     het2: height 
 
    }, 
 
    dataType: "html", 
 
    type: "POST", 
 
    success: function(retdata) { 
 
     $("#data1").html(retdata); 
 
    } 
 
    }); 
 
} </script>

來源

2016-08-11 14:24:39 peternyc

如何避免重複調用javascript函數

回答

相關問題