创建可重用的函数，可以使用多个重复类和ID
创建可重用的函数，可以使用多个重复类和ID
提问于 2014-01-30 00:18:50
因此，我正在创建一个web应用程序，它将对同一页面上的产品进行比较。每次一个人添加一个新产品时，他们都可以选择调整一些输入字段。每个产品都具有完全相同的属性，如类和名称。我可能可以在每个ID上添加一些东西，但是很有可能每个表单都被添加到这个页面中，它可能会有一个重复的ID。是的，我知道这不是正确的HTML，但它还是有效的。因此，我的问题是，我如何能够重用这个相同的函数，而不必为每个添加的特定形式设置一个函数呢？
我有一个我在这里要做的事情的样本：
<form>
<input type="text" id="the_input_id" class="formField1" placeholder="formField1">
<input type="text" id="the_input_id1" class="formField2" placeholder="formField2">
<input type="text" id="total" class="total" placeholder="total">
</form>
<form>
<input type="text" id="the_input_id" class="formField1" placeholder="formField1">
<input type="text" id="the_input_id1" class="formField2" placeholder="formField2">
<input type="text" id="total" class="total" placeholder="total">
</form>剧本：
$(function() {
$('.formField1,.formField2').blur(function() {
updateTotal();
});
var updateTotal = function () {
var input1 = parseInt($('.formField1').val()) || 0;;
var input2 = parseInt($('.formField2').val()) || 0;;
if(!input2){
$('.total').val($('.formField1').val()) || 0;;
}
if(!input1){
$('.total').val($('.formField2').val()) || 0;;
}
else {
$('.total').val(input1 + input2) || 0;;
}
};
var output_total = $('.total');
var total = input1 + input2;
output_total.val(total);
});因此，基本上，当每个表单被添加时，允许它使用该函数并保持输出分离吗？
小提琴
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-30 00:29:43
我不能百分之百肯定你试图用特定的脚本做什么，但是我可以看到你想要做的事情。
像这样的事情应该有效：
$(function() {
$("form").on("blur", "input", function(e){
updateTotal(e.target.form);
});
function updateTotal (root) {
var input1 = parseInt($('.formField1', root).val()) || 0;;
var input2 = parseInt($('.formField2', root).val()) || 0;;
if(!input2){
$('.total', root).val($('.formField1', root).val()) || 0;;
}
if(!input1){
$('.total', root).val($('.formField2', root).val()) || 0;;
}
else {
$('.total', root).val(input1 + input2) || 0;;
}
var output_total = $('.total', root);
var total = input1 + input2;
output_total.val(total);
}
});其主要思想是将一个容器传递给函数，并在所有jQuery中使用该容器在函数内部搜索，方法是将它作为第二个参数传递给$，在css选择器之后。
编辑:在执行此代码时，我使用$.on()创建了一个更好的绑定器，以命中尚未添加到dom的表单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21445498
复制相关文章
相似问题
腾讯云开发者
