javascript - 如何将jquery代码转换为函数？

Question

我有多个 html block ，其代码如下:

<div id="up1">
   <input id="sub1" />
</div>


<div id="up2">
   <input id="sub2" />
</div>

.
.
.

<div id="upn">
   <input id="subn" />
</div>

对于每个 html 这些 block ，我都有相同的 jquery 代码(每个都有自己的 id)

像这样:

$(document).on("change", "#up1",function() {
    e.preventDefault();
    ... some code ...
})); 

$(document).on("change", "#up2",function() {
    e.preventDefault();
    ... some code ...
})); 
.
.
.

$(document).on("change", "#upn",function() {
    e.preventDefault();
    ... some code ...
})); 

这是我的问题

如何避免重复代码？..

也许你建议我必须使用 class 而不是 id，但这不是我的答案。我只想使用 id。

我必须使用 id，而不是类...因为我想在它的 block 上打印结果(或发送数据)。

看来我必须使用一个函数，但是如何在函数中调用它们？

例如，这有效吗？

function myfunction(id1,id2) {
$(document).on("change", "#up1",function() {
    e.preventDefault();
    ... some code ...
})); 

}


myfunction('up1','sub1');
myfunction('up2','sub2');
myfunction('up3','sub3');

Answer 1

为什么不使用多个选择器:

$(document).on("change", "#up1, #up2, #upn", function() {
    e.preventDefault();
    ... some code ...
})); 

在这种情况下，如果任何元素 up1 ... upn 发生更改，事件处理程序将被触发。此外，您需要使用 $(this) 访问已更改的项目，而不是直接通过 ID 访问它。

要访问 sub 元素，您可以使用基于父元素的其他选择器，例如:

$(document).on("change", "#up1, #up2, #upn", function() {
    e.preventDefault();
    var sub = $(this).find('input').eq(0);  // find first input element inside changed element
})); 

或者，如果可能的话，可以更改您的 HTML 结构，使其不使用 sub 项的 ID，而是使用类:

<div id="up1">
   <input id="sub1" class="sub" />
</div>

在这种情况下，您可以使用类选择器:

$(document).on("change", "#up1, #up2, #upn", function() {
    e.preventDefault();
    // find first element inside changed element that has class 'sub':
    var sub = $(this).find('.sub').eq(0);      
}));