jquery - 使用多个“<input>”字段的变量更改 `value` 的值

Question

多个输入字段使用称为乘数的变量设置值。我为每个输入添加了名为 my_value 的新自定义属性，以根据 3 个下拉列表和具有相应值的目标表进行计算。我可以正确计算每个输入并写入 SPAN。

但是我有两个问题或错误，如何解决？1.我尝试使用变量乘数设置输入值，因此当我选择下拉列表时，我会看到相应表中的值显示在输入值上，它显示在控制台日志上尝试了下面的代码，它没有设置 INPUT 值，仅测试一个 Id，但它不起作用，出了什么问题？

$('#Cherry').val(multiplier);

或者使用下面的所有输入都不起作用，出了什么问题？

$("input[type='number']") =multiplier;

我无法设置输入。请参见下图进行说明。

总计显示“NaN”如果我将输入值设置为默认值并使用以下行总计即可正常工作( <input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="40" readonly="true"/> )

result.text($(this).val() * 乘数);

如果我从输入集自定义属性 my_value ="40"中删除所有值，它会计算每个输入，但总计显示 NaN

result.text($(this).attr("my_value") * multiplier);

<input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="" my_value ="40" readonly="true"/>

例如我的查找表或更详细的解释** ***非常感谢*

function myCalculate(){
  var volume = $("#Volume").val();
  var productOrigin = $("#ProductOrigin").val();
  var geographicalLocation = $("#GeoLocation").val();
  
  if (volume === "" || productOrigin === "") {
		// alert("Please select the product origin and volume.");
		return;
	}
  
  var tableToUse = geographicalLocation === "" ? productOrigin : geographicalLocation;
  
  $("input[type='text']").each(function(i){
    
    // Current product ID, e.g. "Apple", "Apricot", etc.
	  var currentProductId = $(this).attr('id');
    
    // Amount to multiply.
    var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text();
    
    // A <span> element, to be populated with the calculated product volume.
	var result = $("<span name='result'>");

	// Calculate the figure and update the result element.
	result.text($(this).attr("my_value") * multiplier); 

	// Remove any previously added <span> result elements.
	$(this).next("span").remove();

	// Insert result after the current input field.
	$(this).after(result);
    
   
        // to calculate Grand total
        function getInputs(selector) {
          var inputs = 0;
          $(selector).each(function() {
            $(this).find("input").each(function() {
              sum += parseInt($(this).html());
               $('#').val(parseInt($(this).html()));
            var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text();
              //  $('#GrandTotal').val(sum); // give the final sum from Log
            });
          });
          return sum;
        }
    
    // to calculate Grand total
        function getDivSum(selector) {
          var sum = 0;
          $(selector).each(function() {
            $(this).find("span").each(function() {
              sum += parseInt($(this).html());
               $('#GrandTotal').val(parseInt($(this).html()));
              //  $('#GrandTotal').val(sum); // give the final sum from Log
            });
          });
          return sum;
        }
    
    console.log(getDivSum("#sumDiv"))
    $("#GrandTotal").next().html(getDivSum("#sumDiv"))
    
        $(document).ready(function() {
          console.log(getDivSum("#sumDiv"));
        });

  }); 
  
}


$('.select').on('change', myCalculate);
$("input[type='text']").on('keyup', myCalculate);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="description" for="ProductOrigin">Product Origin</label>
  <select class="element select medium" id="ProductOrigin" name="ProductOrigin">
    <option value="" selected="selected"></option>
    <option value="Europe">Europe</option>
    <option value="Asia">Asia</option>
    <option value="China">China</option>
    <option value="India">India</option>
    <option value="USA">USA</option>
    <option value="Africa">Africa</option>
  </select>
</div>

<div>
  <label class="description" for="GeoLocation">Geographical Location</label>
  <select class="element select medium" id="GeoLocation" name="GeoLocation">
    <option value="" selected="selected"></option>
    <option value="England">England</option>
    <option value="Scotland">Scotland</option>
    <option value="Wales">Wales</option>
  </select>
</div>
<div>
  <label class="description" for="Volume">Volume</label>
  <select class="element select medium" id="Volume" name="Volume">
    <option value="" selected="selected"></option>
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
  </select>
</div>

<div id="sumDiv">
<div>
  <label class="description" for="Apple">Apple</label>
  <input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="" my_value ="10" readonly="true"/>
</div>
<div>
  <label class="description" for="Apricot">Apricot</label>
  <input id="Apricot" name="Apricot" class="element text medium" type="text" maxlength="255" value="" my_value ="20" readonly="true"/>
</div>
<div>
  <label class="description" for="Banana">Banana</label>
  <input id="Banana" name="Banana" class="element text medium" type="text" maxlength="255" value="" my_value ="20" readonly="true"/>
</div>

<div>
  <label class="description" for="GrandTotal">Grand Total</label>
  <input id="GrandTotal" name="GrandTotal" class="element text medium" type="text" maxlength="255" value="" readonly="true"/>
</div>

</div>

<table id="Europe">
  <thead>Europe</thead>
  <tr>
    <td>Europe</td>
    <th id=10>10</th>
    <th id=100>100</th>
    <th id=1000>1000</th>
  </tr>
  <tbody>
    <tr product='Apple'>
      <td>Apple</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.5</td>
      <td volume='1000'>1</td>
    </tr>
    <tr product='Apricot'>
      <td>Apricot</td>
      <td volume='10'>0</td>
      <td volume='100'>0</td>
      <td volume='1000'>0</td>
    </tr>
    <tr product='Banana'>
      <td>Banana</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.5</td>
      <td volume='1000'>1</td>
    </tr>
  </tbody>
</table>

要进行测试，请选择产品原产地:欧洲、地理位置:空白和下拉列表中的任意数量

Answer 1

使用下面的行替换输入:

  // Insert result after the current input field.
    $(this).after(result);

为了计算总数，我设法解决了问题，设置每个输入的值是通过这一行实现的:

//在当前输入字段后插入结果。$(this).after(结果);

并通过这一行实现提交

 sum += +$(this).text();
 //console.log("Value sum "+sum);
 $('#GrandTotal').val(sum);