Question

我正在尝试在文本字段上计算结果。我有两个文本字段，当有人在第一个文本字段输入3 or 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

这是因为您在两个输入字段上定义了相同的类，所以当您在第二个输入上输入值时，两个函数都有效，因为第二个输入字段具有相同的类。

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

＆＃13;

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

＆＃13;

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

＆＃13;

好吧，我忽略了onchange="opConfig.reloadPrice()"，因为你可能会以某种方式使用它，但它显示控制台错误检查它

使用js计算文本字段

1 个答案: