创建可与多个重复类和ID一起使用的可重用函数

Question

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

 });

因此，基本上，随着每种表单的添加，允许它使用该功能并将输出分开吗？

小提琴

Answer 1

我不是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);

  }

});

最大的想法是将一个容器传递给该函数，并通过在css选择器之后将它作为第二个参数传递给$，在函数内部的所有jQuery dom搜索中使用该容器。

编辑：执行此代码时，我使用$ .on（）进行了更好的装订，以命中尚未添加到dom的表单。