Question

以下是我的文字字段

        <tr>
            <td>Price:</td>
            <td><input type="text" name="price" id="form_textfield" class="price" autocomplete="off" /></td>
        </tr>
        <tr>
            <td>Liters:</td>
            <td><input type="text" name="liters" id="form_textfield" class="liters" autocomplete="off" /></td>
        </tr>
        <tr>
            <td>Amount:</td>
            <td><input type="text" name="jqueryamount"  id="form_textfield" class="jqueryamount" autocomplete="off" /></td>
        </tr>

目前，当您输入价格和升数时，它会将它们相乘并将答案输出到jqueryamount文本字段，它运行良好。我想要做的是当我输入金额和价格时，它会将jqueryamount字段与price字段分开，并将其输出到lrs字段。

UPDATE FIXED

// JavaScript Document
$(document).ready(function(){
$('.price').keyup(calculate);
$('.liters').keyup(calculate);
});
function calculate(e)
{
    $('.jqueryamount').val($('.price').val() * $('.liters').val());
}

// JavaScript Document
$(document).ready(function(){
$('.jqueryamount').keyup(calculate1);
$('.price').keyup(calculate1);
});
function calculate1(e)
{
    $('.liters').val($('.jqueryamount').val() / $('.price').val());
}

刚刚为这项功能添加了一个新名称......愚蠢的我感谢帮助人员

以下是我的javascript

// JavaScript Document
$(document).ready(function(){
$('.price').keyup(calculate);
$('.liters').keyup(calculate);
});
function calculate(e)
{
    $('.jqueryamount').val($('.price').val() * $('.liters').val());
}

// JavaScript Document
$(document).ready(function(){
$('.jqueryamount').keyup(calculate);
$('.price').keyup(calculate);
});
function calculate(e)
{
    $('.liters').val($('.jqueryamount').val() / $('.price').val());
}

我的问题是当添加除法函数时，乘法部分将不再起作用，我再也无法在升格文本字段内输入它给我NaN错误。

Answer 1

从输入获取值后使用parseFloat()函数，将字符串转换为数字。

当您设置价格和金额时，升数会显示如下。

$('.price').keyup(calculateLiters, calculateAmount);
$('.jqueryamount').keyup(calculateLiters);
$('.liters').keyup(calculateAmount);


function calculateLiters(e) {
    price = parseFloat($('.price').val());
    amount = parseFloat($('.jqueryamount').val());
    if(!isNaN(price) && !isNaN(amount)){
        $('.liters').val(amount / price);
    }
}

function calculateAmount(e) {
    price = parseFloat($('.price').val());
    liters = parseFloat($('.liters').val());

    if(!isNaN(price) && !isNaN(liters)){
        $('.jqueryamount').val(price  * liters);
    }
}

Demo

Answer 2

我交换了一些类名和id，以提高代码效率。

<强> HTML

<tr>
    <td>Price:</td>
    <td><input type="text" name="price" id="price" class="form_textfield" autocomplete="off" /></td>
</tr>
<tr>
    <td>Liters:</td>
    <td><input type="text" name="liters" id="liters" class="form_textfield" autocomplete="off" /></td>
</tr>
<tr>
    <td>Amount:</td>
    <td><input type="text" name="jqueryamount"  id="jqueryamount" class="form_textfield" autocomplete="off" /></td>
</tr>

<强>的Javascript

// JavaScript Document
$(document).ready(function(){
    $('.form_textfield').keyup(calculate);
});

function calculate()
{
    $('#jqueryamount').val($('#price').val() * $('#liters').val());
    $('#liters').val($('#jqueryamount').val() / $('#price').val());
}

这是一个有效的演示。 http://jsfiddle.net/vnaDK/

jquery同时乘以和除

2 个答案: