javascript - 使用js对文本字段进行相互计算

Question

我正在尝试计算文本字段的结果。我有两个文本字段，当有人在第一个文本字段上输入诸如 3 或 4 之类的值时，它会在第二个文本字段上生成结果。我也在尝试，如果有人尝试在第二个文本字段上输入值，那么它将在第一个。它适用于第一个条件，但不适用于第二个。我的代码如下。我的第二个文本字段不允许我更改值。

<script type="text/javascript">
jQuery(function(jQuery) {
    jQuery('.product-custom-option').on('keyup', function() {
        var total = jQuery('.product-custom-option').val();
       var perunit = 3;     
       var newprice = total/perunit;
       jQuery('#no_packs').val(Math.ceil(newprice));

    });
});
jQuery(function(jQuery) {
  jQuery('#no_packs').on('keyup', function() {
        var total = jQuery('#no_packs').val();
       var perunit = 3;      
       var newprice = total * perunit;
       jQuery('.product-custom-option').val(newprice);
    });
});
</script>

HTML:

<dl class="last">          
<dt>
</dt><dt><label class="required"><em>*</em>Square meters required</label>
    </dt>
<dd class="last">
    <div class="input-box">
            <input type="text" onchange="opConfig.reloadPrice()" id="options_134_text" class="input-text required-entry  product-custom-option" name="options[134]" value="">
            </div>
</dd>
        </dl>
<div class="">
<label class="required">Number of Packs</label>
<div class="input-box">
            <input type="text" id="no_packs" class="input-text product-custom-option" name="qty" value="">
            </div>
</div>

Answer 1

发生这种情况是因为您在两个输入字段上定义了相同的类，因此当您在第二个输入字段中输入值时，两个函数都会起作用，因为第二个输入字段具有相同的类。

在第一个字段中添加不同的类，然后在函数中使用相同的类

    jQuery(function(jQuery) {
      jQuery('.first').on('keyup', function() {
        var total = jQuery('.product-custom-option').val();
        var perunit = 3;
        var newprice = total / perunit;
        jQuery('#no_packs').val(Math.ceil(newprice));

      });
    });
    jQuery(function(jQuery) {
      jQuery('#no_packs').on('keyup', function() {
        var total = jQuery('#no_packs').val();
        var perunit = 3;
        var newprice = total * perunit;
        jQuery('.first').val(newprice);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<dl class="last">
  <dt>
</dt><dt><label class="required"><em>*</em>Square meters required</label>
    </dt>
  <dd class="last">
    <div class="input-box">
      <input type="text" onchange="opConfig.reloadPrice()" id="options_134_text" class="input-text required-entry product-custom-option first" name="options[134]" value="">
    </div>
  </dd>
</dl>
<div class="">
  <label class="required">Number of Packs</label>
  <div class="input-box">
    <input type="text" id="no_packs" class="input-text product-custom-option" name="qty" value="">
  </div>
</div>

Well i am ignoring onchange="opConfig.reloadPrice()" as may be you are using it in some way but it's showing console errors check about it