如何避免重复调用javascript函数

下面的

javascript

具有

getAjax

功能。它调用html表单中的每个鼠标选择事件。我必须在每个事件中调用相同的函数。当我想修改

getAjax

函数时，必须对所有事件进行修改。是否有任何方法可以将

getAjax

函数保留在一个位置并在每个鼠标事件中调用

注意：所有select元素都在同一个容器中

$（文档）.ready（函数（）{
变量年龄1=21；
变量年龄2=35；
var工资=10000；
var宽度=410；
var高度=510；
getAjax（ajaxUrl、薪水、年龄1、年龄2、宽度、高度）；
$（“#年龄1”）。更改（函数（）{
age1=parseInt（$（this.val（））；
getAjax（ajaxUrl、薪水、年龄1、年龄2、宽度、高度）；
});
$（“#年龄2”）。更改（函数（）{
age2=parseInt（$（this.val（））；
getAjax（ajaxUrl、薪水、年龄1、年龄2、宽度、高度）；
});
$（“#工资”）。更改（函数（）{
salary=parseInt（$（this.val（））；
getAjax（ajaxUrl、薪水、年龄1、年龄2、宽度、高度）；
});
$（“#宽度”）.change（函数（）{
宽度=parseInt（$（this）.val（））；
getAjax（ajaxUrl、薪水、年龄1、年龄2、宽度、高度）；
});
$（“#高度”）.change（函数（）{
高度=parseInt（$（this）.val（））；
getAjax（ajaxUrl、薪水、年龄1、年龄2、宽度、高度）；
});
});
函数getAjax（URL、薪水、年龄1、年龄2、宽度、高度）{
$.ajax({
url:url，
数据：{
萨拉：薪水，
年龄1:1岁，
2岁：2岁，
het1：宽度，
het2：高度
},
数据类型：“html”，
类型：“POST”，
成功：函数（retdata）{
$（#data1”）.html（retdata）；
}
});
}

您可以组合选择器，也可以将变量重写为一个对象，从而使所有内容更加紧凑

$(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);
    });
});

如果您将

getAjax

函数也更改为与对象一起使用，则更好。这将为您节省更多的代码

$(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);
        }
    });
} 

---

效率有点低，这无关紧要，但代码中只有一个事件侦听器。

$（文档）.ready（函数（）{
变量年龄1=21；
变量年龄2=35；
var工资=10000；
var宽度=410；
var高度=510；
getAjax（ajaxUrl、薪水、年龄1、年龄2、宽度、高度）；
$（“#年龄1，#年龄2，#工资，#宽度，#高度”）。更改（函数（）{
age1=parseInt（$（'#age1'）.val（））；
age2=parseInt（$（'#age2'）.val（））；
salary=parseInt（$（'#salary'）.val（））；
width=parseInt（$（'#width'）.val（））；
高度=parseInt（$（'#height'）.val（）；
getAjax（ajaxUrl、薪水、年龄1、年龄2、宽度、高度）；
});
});
函数getAjax（URL、薪水、年龄1、年龄2、宽度、高度）{
$.ajax({
url:url，
数据：{
萨拉：薪水，
年龄1:1岁，
2岁：2岁，
het1：宽度，
het2：高度
},
数据类型：“html”，
类型：“POST”，
成功：函数（retdata）{
$（#data1”）.html（retdata）；
}
});
}

如果所有select元素都在同一个容器中，我只需在父容器上使用一个事件处理程序，并让更改事件冒泡到它。如果您确实需要在每个select上单独设置一个更改处理程序，请在循环中创建它们，因为除了要更新的变量外，更改函数都是相同的。您可以将onchange函数放在元素like中，并相应地传递值。@Shilly yes所有select元素都在同一个容器中。或者，您也可以将同一个类放在所有html元素上，以便将jQuery压缩为类似的内容

$（“.person”）.change（函数（）{…}）

@eisbehr根据我的JS，我可以访问php页面中的

salary

，作为

$salary=$this->input->post（'sala'）。传递的不是变量，而是整个数组。请您解释一下如何访问php代码中的单个值，这些值是作为数组
数据
传递的。完全相同。只需将
'sala'
更改为
'salary'
。同样的vor het1和het2。就这些@GeethWelagedara@eisbehr
data[$（this.attr（“id”）]=parseInt（$（this.val（））中存在小代码错误选择选项时，它不会显示值。但是数组不起作用（正如下面@peternyc的回答）。我认为当选择select时，
数据
数组值赋值有错误。和？有什么问题吗？你的工作也很好@吉思韦拉格达拉