求助:如何将两个相似的jQuery change事件AJAX函数合并?
如何合并两个逻辑相同的jQuery Change事件
没问题呀!你完全可以把这两个逻辑一致的函数合并成一个——问题出在你之前的选择器写法上,jQuery本身就支持同时给多个元素绑定同一个事件,不用写复杂的判断逻辑~
你的错误原因
你之前尝试的if ($("#id_releasing_body")||$("#id_release_body_institution")).change(...)写法是行不通的:
- jQuery即使找不到匹配的元素,也会返回一个空的jQuery对象(不是
false),所以这个if判断永远为真,而且这种写法本身不符合jQuery的事件绑定语法。
正确的合并写法
直接用逗号分隔多个选择器,就能一次性给两个元素绑定同一个change事件,代码逻辑和你原来的完全一致:
$("#id_releasing_body, #id_release_body_institution").change(function () { var url = $("#form_search").attr("data-provider-url"); var releasingBodyId = $(this).val(); $.ajax({ url: url, type: 'GET', dataType: 'json', data: { 'releasing_body': releasingBodyId }, success: function (data) { $("#id_member_state").val(data.member_state); } }); });
额外优化建议(可选)
如果这些元素在代码中会被多次用到,建议提前缓存DOM查询结果,减少重复的DOM操作,提升性能:
// 提前缓存需要用到的元素,避免重复查找DOM const $triggerElements = $("#id_releasing_body, #id_release_body_institution"); const $searchForm = $("#form_search"); const $memberStateInput = $("#id_member_state"); $triggerElements.change(function () { const apiUrl = $searchForm.attr("data-provider-url"); const selectedId = $(this).val(); $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', data: { 'releasing_body': selectedId }, success: function (data) { $memberStateInput.val(data.member_state); } }); });
这样写的好处是:
- 事件触发时,
this会自动指向当前触发事件的元素(不管是#id_releasing_body还是#id_release_body_institution),所以$(this).val()能正确获取到当前选中的值。 - 代码更简洁,维护起来更方便——以后如果要修改逻辑,只需要改一处就好。
内容的提问来源于stack exchange,提问作者Essex
相关产品推荐
相关产品推荐

