Question

Javascript代码：

$('#qty').keyup(function(){
    if($(this).val() != '' && isNumber($(this).val()) && $(this).val() > 0)
    {
    var price = $('#real_price').val() * 1;
    var qty = $(this).val() * 1;

    var total = price * qty;
    $('#price').html(total);
    }
    else
    {
        $('#price').html('500');    
    }
});

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

如果我正在更新第一个字段的价格，它可以正常工作，但是对于第二个字段没有。

我是javascript的新手：）。

Answer 1

试试这个

<input type="text" id="qty1" value="1"/><br />
<input type="text" id="qty2" value="1"/>

$('#qty1,#qty2').keyup(function(){})

在价格评估时间中将其替换为

$('#price').html(total);

与

($(this).attr('id')=="qty1") ? $('#price1').html(total) : $('#price2').html(total);

Answer 2

你可以试试这个，你不能在更多元素中使用id值，而是可以使用classname等，我已经更新了你的小提琴代码，

HTML：

    Price $<span id="price_qty_1">500</span>
    <input type="hidden" id="real_price_qty_1" value="500" />
    <input type="text" id="qty_1" class="qty" value="1"/><br />
    Price $<span id="price_qty_2">500</span>
    <input type="hidden" id="real_price_qty_2" value="500" />
    <input type="text" id="qty_2" class="qty" value="1"/>

Jquery的：

    $('.qty').keyup(function(){
        if($(this).val() != '' && isNumber($(this).val()) && $(this).val() > 0)
        {

        var idAt = $(this).attr('id'); 
        var price = $('#real_price_'+idAt).val() * 1;
        var qty = $(this).val() * 1;

        var total = price * qty;
        $('#price_'+idAt).html(total);
        }
        else
        {
        $('#price_'+idAt).html('500');    
        }
    });

    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

演示：http://jsfiddle.net/hReB3/10/

Answer 3

JSFiddle

在您的字段上使用类而不是ID（ID必须是唯一的）并将它们包含在父DIV中，这样您就可以使用此代码，并为您提供根据需要向页面添加任意数量的部分的范围

HTML

<div>
    Price $<span class="price">500</span>

    <input type="hidden" class="real_price" value="500" />
    <input type="text" class="qty" value="1" />
</div>
<div>
    Price $<span class="price">500</span>

    <input type="hidden" class="real_price" value="500" />
    <input type="text" class="qty" value="1" />
</div>

JS

$('.qty').keyup(function () {
    var $me = $(this),
        $parent = $me.parent('div'),
        total = 500;

    if (isNumber($me.val()) && $me.val() > 0) 
    {
        var price = $parent.find('.real_price').val() * 1,
            qty = $me.val() * 1;

        total = price * qty;           
    }
    $parent.find('.price').html(total);
});

您还可以使用JSFiddle

中显示的data-price属性替换隐藏的字段

Javascript多次更新相同的字段

3 个答案: