[英]how can convert jquery code to functions?
我有多个具有相同代码的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 ...
}));
这是我的问题
如何避免重复代码?
也许你建议我必须使用类而不是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结构,以不将ID用于sub
项,而应使用class:
<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);
}));
您始终可以使用一个类来定位多个项目:
JS
$(document).on("change", ".sub", function() {
e.preventDefault();
... some code ...
}));
的HTML
<div id="up1" class="sub">
<input id="sub1" />
</div>
<div id="up2" class="sub">
<input id="sub2" />
</div>
.
.
.
<div id="upn" class="sub">
<input id="subn" />
</div>
您还可以执行以下操作:
function myFunction(id1,id2){
... code ...
}
$(document).on('change', '.sub', function(e){
var thisID = $(this).prop('id'),
inputID = $(this).find('input').prop('id');
e.preventDefault();
myFunction(thisID, inputID);
});
另外,只是确保您要在div而不是输入上进行更改事件?
使用css属性选择器定位id
以up
开头的所有div:
$(document).on("change", "div[id^='up']", function(e){
e.preventDefault();
console.log("Something changed! ID of div: "+ $(this).attr("id") );
});
您无需编写ID即可访问元素。 类也足够,并且可以使您的代码看起来很小。 如果HTML是这样的:
<div class='input-container'>
<input type=text />
</div>
<div class='input-container'>
<input type=text />
</div>
<div class='input-container'>
<input type=text />
</div>
然后jQuery可以写成:
$(document).ready(function(){
$(document).on('change', '.input-container input[type="text"]', function(){
//your code
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.