jQuery 动态乘法

Question

我正在尝试在 jquery 中创建一个乘法函数，这有助于更改默认的基于值的输出。

例如 - 如果我键入 input#mainInput 值，那么它会更改所有输入值基拥有他的 default value * input#mainInput，如果 value == 'NaN' 它将执行 dirent funcion。

请帮助我如何在 jQuery 中实现此功能。

$(document).on('keyup', 'input#mainInput', function() {
  thisParentQtyValueBox = $(this).val();

  daughtersBoxValueAttr = $("input.input__bom").attr("inputid");

  daughtersBoxValue = $("input#daughterInput_" + daughtersBoxValueAttr).val();

  $("input#daughterInput_" + daughtersBoxValueAttr).val(thisParentQtyValueBox * daughtersBoxValue);

  if ($("input#daughterInput_" + daughtersBoxValueAttr) == 'Nan') {
    $("input#daughterInput_" + daughtersBoxValueAttr).val('3' * daughtersBoxValue)
  }
});

//If

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="mainInput" type="text" placeholder="Number" />
<br><br>
<input class="input__bom" id="daughterInput_1" type="text" placeholder="value" inputid="1" value="5" /><br/>
<input class="input__bom" id="daughterInput_2" type="text" placeholder="value" inputid="2" value="10" /><br/>
<input class="input__bom" id="daughterInput_3" type="text" placeholder="value" inputid="3" value="15" /><br/>
<input class="input__bom" id="daughterInput_4" type="text" placeholder="value" inputid="4" value="20" /><br/>
<input class="input__bom" id="daughterInput_5" type="text" placeholder="value" inputid="5" value="25" /><br/>

Answer 1

您必须将默认值存储在数据属性中，这样它就不会乘以结果值，而是乘以您的默认值。对于动态乘法，可以使用 jquery each。检查下面的代码。

$(document).on('input', 'input#mainInput', function() {
  thisParentQtyValueBox = parseInt( $(this).val() );
  if( Number.isNaN( thisParentQtyValueBox ) ){
    thisParentQtyValueBox = 3;
  }
  $('.input__bom').each(function(){
    $(this).val( thisParentQtyValueBox * $(this).data('value') );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="mainInput" type="text" placeholder="Number" />
<br><br>
<input class="input__bom" id="daughterInput_1" type="text" placeholder="value" inputid="1" data-value ="5" value="5" /><br/>
<input class="input__bom" id="daughterInput_2" type="text" placeholder="value" inputid="2" data-value ="10" value="10" /><br/>
<input class="input__bom" id="daughterInput_3" type="text" placeholder="value" inputid="3" data-value ="15" value="15" /><br/>
<input class="input__bom" id="daughterInput_4" type="text" placeholder="value" inputid="4" data-value ="20" value="20" /><br/>
<input class="input__bom" id="daughterInput_5" type="text" placeholder="value" inputid="5" data-value ="25" value="25" /><br/>

Answer 2

如果我没理解错的话，当输入不是数字时，你想要做的就好像输入是 3 一样。

您的代码中存在一些问题：

$("input.input__bom").attr("inputid") 的计算结果始终为 1，因为仅使用 first 匹配元素。使用此属性值然后通过其 id 属性.
您需要在某处进行循环才能访问每个“input__bom”元素。
== 'Nan 永远不会是真的。事实上，您应该测试主输入本身，看看它是否代表一个有效数字。为此，您可以使用 isNaN.
给这些元素一个唯一的 id 属性是个坏主意。您可以使用 jQuery 访问它们并处理它们。不需要这样的 id 属性。
不要为此使用 keyup 事件，因为可以通过按键以外的其他方式进行输入（例如，用鼠标拖动文本，或使用上下文菜单进行粘贴）。请改用 input 事件。
在 $(document) 上没有充分的理由使用事件委托。只需将您的侦听器直接绑定到主要输入元素即可。
使用 var（或 let、const）声明您的变量。不这样做是不好的做法（它使您的变量成为全局变量）。
这 5 个“bom”输入元素似乎并不是真正用于输入，而是用于输出。在那种情况下 placeholder 属性没有意义，它们最好用 readonly 属性标记。

$("#mainInput").on('input', function() {
    var mainInput = $(this).val();
    var multiplier = +mainInput; // convert to number with unary +
    // default value in case input is not a valid number, or is empty
    if (Number.isNaN(multiplier) || !mainInput) {
        multiplier = 3; 
    }
    $('.input__bom').each(function() {
        $(this).val( multiplier * $(this).data('value') );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="mainInput" type="text" placeholder="Number" />
<br><br>
<input class="input__bom" type="text" readonly data-value="5" value="5"><br/>
<input class="input__bom" type="text" readonly data-value="10" value="10"><br/>
<input class="input__bom" type="text" readonly data-value="15" value="15"><br/>
<input class="input__bom" type="text" readonly data-value="20" value="20"><br/>
<input class="input__bom" type="text" readonly data-value="25" value="25" /><br/>

jQuery 动态乘法

Multiplication in jQuery dynamically

html

javascript

jquery

multiplication