多个输入字段使用称为乘数的变量设置值。我在每个输入中添加了一个名为my_value的新自定义属性,以根据3下拉列表和具有相应值的目标表进行计算。我可以正确计算每个输入并在SPAN上写入。
但是我有两个问题或bug我该如何解决呢? 1.我试图用变量乘数设置输入值,所以当我选择下拉时,我看到相应表中的值显示在控制台日志上显示的输入值下面尝试下面的代码它没有设置INPUT值只测试一个Id它没用,有什么不对?
$('#Cherry').val(multiplier);
或用于以下所有输入不工作,有什么不对?
$("input[type='number']") =multiplier;
我无法设置输入。请看下面的图片以便说明。
<input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="40" readonly="true"/>
),则总计显示“NaN”
result.text($(this).val()* multiplier);如果我从输入集自定义属性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>
要测试,请选择产品来源:欧洲,地理位置:空白和任何音量从下拉列表
使用下面的行替换输入:
// Insert result after the current input field.
$(this).after(result);
为了计算总数,我设法解决了问题,设置每个输入的值是由这一行实现的:
//在当前输入字段后插入结果。 $(本)。经过(结果);
并通过这条线获得提交
sum += +$(this).text();
//console.log("Value sum "+sum);
$('#GrandTotal').val(sum);