在div上获取查找字段值并设置输入值

Question

我设法在div组上获取了所有计算所得的值并设置了总数，但它们只想显示要显示的查找值。目前，我正在SPAN上显示计算结果。 var“乘数”

我尝试获取所有输入值，并使用以下代码进行设置。

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;
}

在下面的密码笔上：https://codepen.io/dunya/pen/mojKNz 我写的是最后一笔款项，没有任何问题。 我只想显示变量乘数。

我需要向用户隐藏value = 10，但要显示变量乘数。 我的公式是这样的： 基于产品来源，地理位置和数量的查找值得到乘数（以Var为单位），我得到的是：  单个输入的总和=乘数*输入值（例如，苹果为10） 我只需要使用乘数（作为Var）覆盖所有10个输入字段的输入值，我尝试使用的功能仍然无法解决问题， 任何建议或方法。 谢谢。

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

您可以在上面的Codepen链接上看到，我有10个ID，例如Apple，Apricot ..等等，我将其设为只读。每个Apple的默认值是10，而Apricot的默认值是20，这是正在更改的值，我还使它仅对经过验证的最终用户具有更改权限。我的需求更改已更改，我将需要在其中显示值乘数变量，而不是属性值，例如10或20，依此类推，问题是我正在使用值属性来使计算工作正常，否则我的最终总计计算将是错误的。我该如何解决。 例如，我选择了“产品原产地：欧洲”，“位置”：空白且“体积” = 10，这3个下拉菜单为我提供了名为“欧洲”的查找表ID。 “体积”将与要计算苹果的列相匹配，它将为0.1 * 10（id = Apple的默认值为10），因此它得到1，依此类推，“总计”是对SPAN上的所有计算结果求和以得出最终值。 如何仍然可以使用或存储每个输入的默认值，例如10，以此类推，而替换为乘数（作为Var），这样10个输入将显示Apple 0.1，Apricot 0，...和Coconut 0.1 ，还记得默认值吗？ 实体模型显示在下图：

非常感谢

Answer 1

我正在使用此答案来检查我是否正确回答了您的问题，因此可能不会是最终的！

设置输入值

如果您的问题实际上是在更改输入，这里有一些简单的示例：

// ****
// ** WITH JAVASCRIPT ** //
// ****

// Get DOM Elements
const js_input_foo     = document.getElementById('js_input_foo');
const js_btn_change    = document.getElementById('js_btn_change');

// Add event listener
js_btn_change.addEventListener('click', () => {
	js_input_foo.value = 'New Value';
});

// ****
// ** WITH JQuery ** //
// ****

// Get DOM Elements
const jq_input_foo    = $('#jq_input_foo');
const jq_btn_change   = $('#jq_btn_change');

// Add event listener
jq_btn_change.click(() => {
	jq_input_foo.val('New Value');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
  ** WITH JAVASCRIPT **
 -->
<h2>JavaScript</h2>
<!-- Input which displays a value -->
<input id="js_input_foo" type="text" value="100" />
<!-- Button which changes the input -->
<button id="js_btn_change">Change!</button>

<!--
  ** WITH JAVASCRIPT **
 -->
<h2>JQuery</h2>
<!-- Input which displays a value -->
<input id="jq_input_foo" type="text" value="100" />
<!-- Button which changes the input -->
<button id="jq_btn_change">Change!</button>

根据数据集设置输入值

如果您希望通过循环输入来设置输入，这可能会有所帮助：

// Constants
const dataset = {
  one: "new date one",
  two: "new date two",
  three: "new date three",
  four: "new date four",
  five: "new date five"
};

// Dom elements
const container_inputs = document.getElementById('container_inputs');
const btn_changeInputs = document.getElementById('btn_changeInputs');

// Add Event Listener
btn_changeInputs.addEventListener('click', () => {
	Array.from(container_inputs.children).forEach(child => {
    let key = child.getAttribute('key');		// Get the Key Attribute
    
    // If key attribute exists fill the corresponding entry
		if(key) child.value = dataset[key];
  });
});

<h2>Setting the corresponding values</h2>

<div id="container_inputs">
  Input One    <input type="text" id="input_one"    key="one">    <br>
  Input Two    <input type="text" id="input_two"    key="two">    <br>
  Input Three  <input type="text" id="input_three"  key="three">  <br>
  Input Four   <input type="text" id="input_four"   key="four">   <br>
  Input Five   <input type="text" id="input_five"   key="five">
</div>

<button id="btn_changeInputs">Change!</button>

获取属性并将其用于计算值

因此，设置依赖于属性和乘数的元素的值将是：

// **
// JavaScript
// **

element.value = element.getAttribute('my_value') * multiplier;

// **
// JQuery 
// **

// ****************************************************
// I STRONGLY RECOMMEND ONLY GETTING THE ELEMENT ONCE *
// ****************************************************

let element = $('#element');                           // Getting the element
element.val(element.attr('my_value') * multiplier);    // Setting the value

并且html元素如下所示：

<input type="text" id="element" my_value="100" />

Answer 2

我设法解决了这个问题，通过此行来设置每个输入的值：

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

并通过此行实现提交

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

当我显示跨度的所有结果时，我在下面使用了此隐藏

 $( "span" ).hide();

jsfiddle.net上的

工作版本 https://jsfiddle.net/erkindunya/L3d4j8hv/17/

这可能会帮助其他这样做的人