我正在尝试在文本字段上计算结果。我有两个文本字段,当有人在第一个文本字段输入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>
答案 0 :(得分: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);
});
});
&#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()"
,因为你可能会以某种方式使用它,但它显示控制台错误检查它