Jquery或JavaScript ||乘以＆amp;将两个动态输入字段分开

Question

我建立一个计算表格，其中有两个输入值：常规数字和百分比。

我希望带有常规数字的输入值除以输入值和百分比。

示例：

（您的值为1是常规数字）

价值1:60

（您的值为2是常规百分比）

值2：20％

这两个值应按以下方式相互划分

60 （值1） * 20％（值2） = （结果） 12

我知道实现此目的的代码如下所示：

    var value1 = $('#input1').val();
    var value2 = $('#input2').val();
    var result = $('#result');

    result.val(value1/100 * value2);

但这是棘手的部分。

输入字段是动态，这意味着如果他/她希望这样做，用户可以为常规数字创建20个输入字段作为百分比。

这意味着上面编写的代码不再足够了，我需要编写一个动态运行到所有输入字段的代码来计算所有代码。

我在＆＃34; Ruby on Rails 5 ＆＃34;中创建了这个应用程序。

我使用过嵌套字段＆amp; Jquery动态添加新输入字段并将其删除。

现在我写了这段代码：

  $(".domestic-object-procentages-low").each(function(i) {
      $(this).attr('id', "domestic-input-procentages-low-1-" + (i + 1));
  });

此代码的目的是通过添加+1 （值1）

为每个已创建且当前的国内对象提供唯一ID

现在我已经写了另一段代码：

      $(".domestic-object-procentages-2-low").each(function(i) {
      $(this).attr('id', "domestic-input-procentages-low-1-2-" + (i + 1));
  });

其中两个添加到它几乎相同。 （值2）

现在我要做的是将第一个输入字段的值除以100，然后将其与第三个输入字段的值相乘。

此结果应存储在第二个字段中。

这是我迄今为止成功实现的目标

  var i=0;
  $("#domestic-input-2-low-" + (i + 1)).each(function(i) {
    $(this).val()= $("#value3-0").val()/100 * $("#domestic-input-low-" + (i + 1)).each.val()
  })

我现在遇到的问题是我的编码技能不足以解决我目前的问题。

我要求社区堆栈溢出，我如何才能最好地解决这个问题并实现我想要做的事情。

我希望我能够很好地解释这一切，因为你太明白了。

谢天谢地

HTML文件

INPUT 1

<div class="field">
      <h1>Objectives</h1>

          <h4>Domestic</h4>
     <% if @managment.objectives.any? %>
      <% @managment.objectives.each do |object| %>

        <input class="inputbudget procentages" id="objectiveinput" onkeydown="return false"  value="<%= object.objectivesname1 %>">
        <input class="inputbudget procentages domestic-object-procentages-low" id="procentages"  onkeydown="return false"  value="<%= object.lowprocent1 %>">%
        <input class="inputbudget procentages domestic-object-procentages-med" id="procentages"  onkeydown="return false"  value="<%= object.medprocent1 %>">%
        <input class="inputbudget procentages domestic-object-procentages-high" id="procentages"  onkeydown="return false"  value="<%= object.highprocent1 %>">%
        <input class="inputbudget procentages domestic-object-low" id="procentages"   onkeydown="return false"  value="<%= object.lowobjectives1 %>">
        <input class="inputbudget procentages domestic-object-med" id="procentages"   onkeydown="return false"  value="<%= object.medobjectives1 %>">
        <input class="inputbudget procentages domestic-object-high" id="procentages"   onkeydown="return false"  value="<%= object.highobjectives1 %>">

      <br>
      <% end %>
    <% end %>

    <h4>continental</h4>
     <% if @managment.continentals.any? %>
      <% @managment.continentals.each do |continental| %>

        <input class="inputbudget procentages" id="objectiveinput" onkeydown="return false"  value="<%= continental.objectivesname2 %>">
        <input class="inputbudget procentages continental-object-procentages-low" id="procentages"  onkeydown="return false"  value="<%= continental.lowprocent2 %>">%
        <input class="inputbudget procentages continental-object-procentages-med" id="procentages"  onkeydown="return false"  value="<%= continental.medprocent2 %>">%
        <input class="inputbudget procentages continental-object-procentages-high" id="procentages"  onkeydown="return false"  value="<%= continental.highprocent2 %>">%
        <input class="inputbudget procentages continental-object-low" id="procentages"   onkeydown="return false"  value="<%= continental.lowobjectives2 %>">
        <input class="inputbudget procentages continental-object-med" id="procentages"   onkeydown="return false"  value="<%= continental.medobjectives2 %>">
        <input class="inputbudget procentages continental-object-high" id="procentages"   onkeydown="return false"  value="<%= continental.highobjectives2 %>">
   <br>
  <% end %>
<% end %>

<h4>International</h4>
 <% if @managment.internationals.any? %>
  <% @managment.internationals.each do |international| %>

    <input class="inputbudget procentages" id="objectiveinput" onkeydown="return false"  value="<%= international.objectivesname3 %>">
    <input class="inputbudget procentages international-object-procentages-low" id="procentages"  onkeydown="return false"  value="<%= international.lowprocent3 %>">%
    <input class="inputbudget procentages international-object-procentages-med" id="procentages"  onkeydown="return false"  value="<%= international.medprocent3 %>">%
    <input class="inputbudget procentages international-object-procentages-high" id="procentages"  onkeydown="return false"  value="<%= international.highprocent3 %>">%
    <input class="inputbudget procentages international-object-low" id="procentages"   onkeydown="return false"  value="<%= international.lowobjectives3 %>">
    <input class="inputbudget procentages international-object-med" id="procentages"   onkeydown="return false"  value="<%= international.medobjectives3 %>">
    <input class="inputbudget procentages international-object-high" id="procentages"   onkeydown="return false"  value="<%= international.highobjectives3 %>">

  <br>
  <% end %>
<% end %>

INPUT 2

        <div class="field">
      <h1>Objectives</h1>

    <h4>Domestic</h4>
     <% if @managment.objectives.any? %>
      <% @managment.objectives.each do |object| %>

        <input class="inputbudget procentages" id="objectiveinput" onkeydown="return false"  value="<%= object.objectivesname1 %>">
        <input class="inputbudget procentages domestic-object-procentages-2-low" id="procentages"  onkeydown="return false"  value="<%= object.lowprocent1 %>">%
        <input class="inputbudget procentages domestic-object-procentages-2-med" id="procentages"  onkeydown="return false"  value="<%= object.medprocent1 %>">%
        <input class="inputbudget procentages domestic-object-procentages-2-high" id="procentages"  onkeydown="return false"  value="<%= object.highprocent1 %>">%
        <input class="inputbudget procentages domestic-object2-low" id="procentages"   onkeydown="return false"  value="<%= object.lowobjectives1 %>">
        <input class="inputbudget procentages domestic-object2-med" id="procentages"   onkeydown="return false"  value="<%= object.medobjectives1 %>">
        <input class="inputbudget procentages domestic-object2-high" id="procentages"   onkeydown="return false"  value="<%= object.highobjectives1 %>">
        <input class="inputbudget procentages domestic-object2" id="procentages"   onkeydown="return false"  value="<%= object.highobjectives1 %>">
        <input class="inputbudget procentages domestic-object2" id="procentages"   onkeydown="return false"  value="<%= object.highobjectives1 %>">
        <input class="inputbudget procentages domestic-object2" id="procentages"   onkeydown="return false"  value="<%= object.highobjectives1 %>">
      <br>
      <% end %>
    <% end %>

    <h4>continental</h4>
     <% if @managment.continentals.any? %>
      <% @managment.continentals.each do |continental| %>

        <input class="inputbudget procentages" id="objectiveinput" onkeydown="return false"  value="<%= continental.objectivesname2 %>">
        <input class="inputbudget procentages continental-object-procentages-2-low" id="procentages"  onkeydown="return false"  value="<%= continental.lowprocent2 %>">%
        <input class="inputbudget procentages continental-object-procentages-2-med" id="procentages"  onkeydown="return false"  value="<%= continental.medprocent2 %>">%
        <input class="inputbudget procentages continental-object-procentages-2-high" id="procentages"  onkeydown="return false"  value="<%= continental.highprocent2 %>">%
        <input class="inputbudget procentages continental-object2-low" id="procentages"   onkeydown="return false"  value="<%= continental.lowobjectives2 %>">
        <input class="inputbudget procentages continental-object2-med" id="procentages"   onkeydown="return false"  value="<%= continental.medobjectives2 %>">
        <input class="inputbudget procentages continental-object2-high" id="procentages"   onkeydown="return false"  value="<%= continental.highobjectives2 %>">
        <input class="inputbudget procentages continental-object2" id="procentages"   onkeydown="return false"  value="<%= continental.highobjectives2 %>">
        <input class="inputbudget procentages continental-object2" id="procentages"   onkeydown="return false"  value="<%= continental.highobjectives2 %>">
        <input class="inputbudget procentages continental-object2" id="procentages"   onkeydown="return false"  value="<%= continental.highobjectives2 %>">
       <br>
      <% end %>
    <% end %>

    <h4>International</h4>
     <% if @managment.internationals.any? %>
      <% @managment.internationals.each do |international| %>

        <input class="inputbudget procentages" id="objectiveinput" onkeydown="return false"  value="<%= international.objectivesname3 %>">
        <input class="inputbudget procentages international-object-procentages-2-low" id="procentages"  onkeydown="return false"  value="<%= international.lowprocent3 %>">%
        <input class="inputbudget procentages international-object-procentages-2-med" id="procentages"  onkeydown="return false"  value="<%= international.medprocent3 %>">%
        <input class="inputbudget procentages international-object-procentages-2-high" id="procentages"  onkeydown="return false"  value="<%= international.highprocent3 %>">%
        <input class="inputbudget procentages international-object2-low" id="procentages"   onkeydown="return false"  value="<%= international.lowobjectives3 %>">
        <input class="inputbudget procentages international-object2-med" id="procentages"   onkeydown="return false"  value="<%= international.medobjectives3 %>">
        <input class="inputbudget procentages international-object2-high" id="procentages"   onkeydown="return false"  value="<%= international.highobjectives3 %>">
        <input class="inputbudget procentages international-object2" id="procentages"   onkeydown="return false"  value="<%= international.highobjectives3 %>">
        <input class="inputbudget procentages international-object2" id="procentages"   onkeydown="return false"  value="<%= international.highobjectives3 %>">
        <input class="inputbudget procentages international-object2" id="procentages"   onkeydown="return false"  value="<%= international.highobjectives3 %>">
      <br>
      <% end %>
    <% end %>
  </div>

INPUT 3

  <div class="colum" id="regio">
    <p>Low</p>
    <input class="box" value="1" id="value3-0" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-1" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-2" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-9" type="text" onkeydown="return false" />
  </div>
  <!-- COLUM 2 MEDIUM -->
  <div class="colum" id="regio">
    <p>Medium</p>
    <input class="box" value="1" id="value3-3" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-4" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-5" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-10" type="text" onkeydown="return false" />
  </div>
  <!-- COLUM 3 HIGH -->
  <div class="colum" id="regio">
    <p>High</p>
    <input class="box" value="1" id="value3-6" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-7" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-8" type="text" onkeydown="return false" />
    <input class="box" value="1" id="value3-11" type="text" onkeydown="return false" />
  </div>

CODE

    // procentages

      //domestic-1

      $(".domestic-object-procentages-low").each(function(i) {
          $(this).attr('id', "domestic-input-procentages-low-1-" + (i + 1));
      });

      $(".domestic-object-procentages-med").each(function(i) {
          $(this).attr('id', "domestic-input-procentages-med-1-" + (i + 1));
      });

      $(".domestic-object-procentages-high").each(function(i) {
          $(this).attr('id', "domestic-input-procentages-high-1-" + (i + 1));
      });

      //

      //continental-1

          $(".continental-object-procentages-low").each(function(i) {
          $(this).attr('id', "continental-input-procentages-low-2-" + (i + 1));
      });

          $(".continental-object-procentages-med").each(function(i) {
          $(this).attr('id', "continental-input-procentages-med-2-" + (i + 1));
      });

          $(".continental-object-procentages-high").each(function(i) {
          $(this).attr('id', "continental-input-procentages-high-2-" + (i + 1));
      });

      //

      //International-1

          $(".international-object-procentages-low").each(function(i) {
          $(this).attr('id', "international-input-procentages-low-3-" + (i + 1));
      });

          $(".international-object-procentages-low").each(function(i) {
          $(this).attr('id', "international-input-procentages-med-3-" + (i + 1));
      });

          $(".international-object-procentages-low").each(function(i) {
          $(this).attr('id', "international-input-procentages-high-3-" + (i + 1));
      }); 

      //

      //domestic-2

          $(".domestic-object-procentages-2-low").each(function(i) {
          $(this).attr('id', "domestic-input-procentages-low-1-2-" + (i + 1));
      });

          $(".domestic-object-procentages-2-med").each(function(i) {
          $(this).attr('id', "domestic-input-procentages-med-1-2-" + (i + 1));
      });

          $(".domestic-object-procentages-2-high").each(function(i) {
          $(this).attr('id', "domestic-input-procentages-high-1-2-" + (i + 1));
      });

      //

      //continental-2

          $(".continental-object-procentages-2-low").each(function(i) {
          $(this).attr('id', "continental-input-procentages-low-2-2-" + (i + 1));
      });
          $(".continental-object-procentages-2-med").each(function(i) {
          $(this).attr('id', "continental-input-procentages-med-2-2-" + (i + 1));
      }); 
          $(".continental-object-procentages-2-high").each(function(i) {
          $(this).attr('id', "continental-input-procentages-high-2-2-" + (i + 1));
      });


      //

      //International-2

          $(".international-object-procentages-2-low").each(function(i) {
          $(this).attr('id', "international-input-procentages-low-3-2-" + (i + 1));
      });
          $(".international-object-procentages-2-med").each(function(i) {
          $(this).attr('id', "international-input-procentages-med-3-2-" + (i + 1));
      });
          $(".international-object-procentages-2-high").each(function(i) {
          $(this).attr('id', "international-input-procentages-high-3-2-" + (i + 1));
      });

      //

    //

    //objects

      //domestic-1

      $(".domestic-object-low").each(function(i) {
          $(this).attr('id', "domestic-input-low-" + (i + 1));
      });
      $(".domestic-object-med").each(function(i) {
          $(this).attr('id', "domestic-input-med-" + (i + 1));
      });
      $(".domestic-object-high").each(function(i) {
          $(this).attr('id', "domestic-input-high-" + (i + 1));
      });

      //

      //continental-1
      $(".continental-object-low").each(function(i) {
          $(this).attr('id', "continental-input-low-" + (i + 1));
      });
      $(".continental-object-med").each(function(i) {
          $(this).attr('id', "continental-input-med-" + (i + 1));
      });
      $(".continental-object-high").each(function(i) {
          $(this).attr('id', "continental-input-high-" + (i + 1));
      });
      //

      //international-1

      $(".international-object-low").each(function(i) {
          $(this).attr('id', "international-input-low-" + (i + 1));
      });
      $(".international-object-med").each(function(i) {
          $(this).attr('id', "international-input-med-" + (i + 1));
      });
      $(".international-object-high").each(function(i) {
          $(this).attr('id', "international-input-high-" + (i + 1));
      });

      //

      //domestic-2

      $(".domestic-object2-low").each(function(i) {
          $(this).attr('id', "domestic-input-2-low-" + (i + 1));
      });
      $(".domestic-object2-med").each(function(i) {
          $(this).attr('id', "domestic-input-2-med-" + (i + 1));
      });
      $(".domestic-object2-high").each(function(i) {
          $(this).attr('id', "domestic-input-2-high-" + (i + 1));
      });

      //continental-2

      $(".continental-object2-low").each(function(i) {
          $(this).attr('id', "continental-input-2-low-" + (i + 1));
      });
      $(".continental-object2-med").each(function(i) {
          $(this).attr('id', "continental-input-2-med-" + (i + 1));
      });
      $(".continental-object2-high").each(function(i) {
          $(this).attr('id', "continental-input-2-high-" + (i + 1));
      });

      //

      //international-2

      $(".international-object2-low").each(function(i) {
          $(this).attr('id', "international-input-2-low-" + (i + 1));
      });
      $(".international-object2-med").each(function(i) {
          $(this).attr('id', "international-input-2-med-" + (i + 1));
      });
      $(".international-object2-high").each(function(i) {
          $(this).attr('id', "international-input-2-high-" + (i + 1));
      });

      //

        var i=0;
  $("#domestic-input-2-low-" + (i + 1)).each(function(i) {
    $(this).val()= $("#value3-0").val()/100 * $("#domestic-input-low-" + (i + 1)).val()
  })

    //
  });




//

Answer 1

.val（）是一个函数，而不是可以为其赋值的属性。

请参阅下面的代码片段，执行与您尝试实现的内容类似的内容：

function updateValues() {
  
  event.preventDefault();
  
  $('.table-row').each(function(i, e) {
    
    var totalField = $(e).find('#total-' + i);
    
    var value1 = $(e).find('#first-' + i).val();
    var value2 = $(e).find('#second-' + i).val();
    
    totalField.val(value1 + value2);
    
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="table-row">
    <td><input type="text" class="numeric-field" id="total-0" disabled /></td>
    <td><input type="text" class="numeric-field" id="first-0" /></td>
    <td><input type="text" class="numeric-field" id="second-0" /></td>
  </tr>
  <tr class="table-row">
    <td><input type="text" class="numeric-field" id="total-1" disabled /></td>
    <td><input type="text" class="numeric-field" id="first-1" /></td>
    <td><input type="text" class="numeric-field" id="second-1" /></td>
  </tr>
  <tr class="table-row">
    <td><input type="text" class="numeric-field" id="total-2" disabled /></td>
    <td><input type="text" class="numeric-field" id="first-2" /></td>
    <td><input type="text" class="numeric-field" id="second-2" /></td>
  </tr>
</table>
<button onclick="updateValues()">Update</button>

Answer 2

我不确定所需的输出是什么，但我试图简化所提供的代码，以说明如何根据输入字段中的值进行计算

希望这有帮助。

$(function() {
  var i = 0;

  // assign ids to the inputs
  $(".infield").each(function(i) {
    $(this).attr('id', "infield-" + (i + 1));
  });

  $("#go").on('click', function() {
    // get operand
    var operationToPerform = $("#operator").val();

    // get input fields
    var infield1 = parseInt($("#infield-1").val());
    var infield2 = parseInt($("#infield-2").val());

    // will hold the results of the operation.
    var resultVal;

    switch (operationToPerform) {
      case "+":
        resultVal = infield1 + infield2;
        break;
      case "-":
        resultVal = infield1 - infield2;
        break;
      case "*":
        resultVal = infield1 * infield2;
        break;
      case "/":
        resultVal = infield1 / infield2;
        break;
      default:
        resultVal = "Select an Operand"
    }

    $("#results").text(resultVal).effect("shake", {
      times: 4
    }, 1000).effect('highlight');

  });

});

input {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="container">
  <input type="text" class="infield" />
  <select id="operator">
    <option value="">Select an Operand</option>
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="text" class="infield" />
  <button id="go">Go</button>
  <hr/>Results: <span id="results"></span> 
  <br/>

</div>