Question

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

但是我有两个问题或错误，我该如何解决？ 1.我尝试使用变量乘数设置输入值，所以当我选择下拉菜单时，我会在输入值上看到对应表中显示的值，它显示在控制台日志中尝试下面的代码，它不设置输入值只是为了测试一个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（result）;

并通过此行实现提交

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

使用多个“ <input />”字段的变量更改“值”的值

1 个答案: