Question

我有多个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，而不是类...因为我想在它的块上打印结果（或发送数据）。

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

例如这是否有效？

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

Answer 2

您始终可以使用课程来定位多个项目：

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而不是输入上进行更改事件？

Answer 3

使用css属性选择器定位id以up开头的所有div：

$(document).on("change", "div[id^='up']", function(e){
  e.preventDefault();
  console.log("Something changed! ID of div: "+ $(this).attr("id") ); 
});

Answer 4

您不必编写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
    });
});

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

4 个答案: