Javascript 创建可重复使用的函数，该函数可用于多个重复类和ID'；s

因此，我正在创建一个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>

所以基本上，在添加每个表单时，允许它使用该函数并保持输出分离

---

我不能100%确定您试图对特定脚本执行什么操作，但我可以从总体模式的角度看您想要执行什么操作

像这样的方法应该会奏效：

$(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);

  }

});

其主要思想是将容器传递给函数，并在函数内的所有jQueryDOM搜索中使用该容器，方法是将其作为css选择器之后的第二个参数传递给$

---

编辑：我制作了一个更好的活页夹，在执行此代码时，使用$.on（）来点击尚未添加到dom中的表单。

使用相对路径，并将每个表单的父容器提供给脚本。如果您没有“正确的HTML”，请先修复它！“重复ID”不起作用。你能扩展一下吗？@isaacweathers:他说你应该给你的函数一个参数，让它在哪个窗体上运行。但我不知道可以创建多少窗体。因此，我需要任何表单的全局引用，这些表单基本上是说，当用户处于此表单中时，使用此函数并在此处显示结果，但忽略可能具有相同类的任何其他参数？我在更新的fiddle中尝试了您的示例，但它不起作用：可能我遗漏了一些内容，但我知道您将如何使用它。正如上面所暗示的，如果我可以将页面上的任何表单作为参数传递并将其分开，那么我应该能够重用它并将数据分开，只显示具有该类且与该表单相关的输入中的输出。上面的原始小提琴显示了我正在努力实现的目标。snap，没有看到小提琴。你有一些语法错误，我修复了我的，如果有点不对劲，不确定你想要什么，但这更接近你得到的，一个可扩展的解决方案：（回答用相同的工作代码更新）我认为jQuery事件可以更好，但我的jQuery已经生锈了。这正是我现在需要的，谢谢。我过度阅读了OOP JS和原型，这是我认为我必须要做的，但这应该让我达到我现在需要的地方。我给了你分数。非常感谢。

$(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);

  }

});