我有多个 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');
最佳答案
为什么不使用多个选择器:
$(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);
}));
关于javascript - 如何将jquery代码转换为函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37231107/