如何将jQuery代码转换为函数？

debugcn 发表于 Dev

伊利兹

我有多个具有相同代码的html块，如下所示：

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


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

.
.
.

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

对于每个HTML这些块，我有相同的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，而不是class ...，因为我想要在块上打印结果（或发送数据）。

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

例如，这有效吗？

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。