如何將jquery代碼轉換爲函數？

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

這是我qestion

如何避免重複的代碼？..

也許你建議我我必須使用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'); 

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結構不使用ID爲sub項目和使用類，而不是：

<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

您不必編寫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 
    }); 
}); 

Answer 4

使用CSS屬性選擇目標，其id開始與up所有div：

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