Javascript многократное обновление одного и того же поля

Question

Javascript многократное обновление одного и того же поля

0

Код 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 :).

marius 29 нояб. 2013, в 17:46

Источник

4

Вы не можете присвоить один и тот же идентификатор двум элементам. Используйте вместо этого классы.
Denys Séguret 29 нояб. 2013, в 16:02

Теги:

javascript

jquery

3 ответа

0

Можете ли вы попробовать это, вы не сможете использовать значение 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/

Krish R 29 нояб. 2013, в 15:09

0

Работает отлично, спасибо! :)
marius 29 нояб. 2013, в 16:27

0

Попробуй это

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

Suganthan Madhavan Pillai 29 нояб. 2013, в 14:16

0

Цены автоматически генерируются из базы данных SQL. Я не знаю количество этих ссылок на странице. Может быть 1 или может быть 10.
marius 29 нояб. 2013, в 16:13
0

просто поддерживайте разные идентификаторы для тега оценки цены и полей ввода, это нормально
Suganthan Madhavan Pillai 29 нояб. 2013, в 16:19
0

@marius использует условные обозначения добрых имен, это хорошо, если вы используете item1 в качестве идентификатора для поля ввода один, то для метки оценки цены используйте priceitem1 в качестве идентификатора, тогда вы можете легко написать общую функцию даже для 100 полей
Suganthan Madhavan Pillai 29 нояб. 2013, в 16:23

Показать ещё 1 комментарий

Ещё вопросы

Вы не можете присвоить один и тот же идентификатор двум элементам. Используйте вместо этого классы.
Цены автоматически генерируются из базы данных SQL. Я не знаю количество этих ссылок на странице. Может быть 1 или может быть 10.
просто поддерживайте разные идентификаторы для тега оценки цены и полей ввода, это нормально
@marius использует условные обозначения добрых имен, это хорошо, если вы используете item1 в качестве идентификатора для поля ввода один, то для метки оценки цены используйте priceitem1 в качестве идентификатора, тогда вы можете легко написать общую функцию даже для 100 полей

Jonathan · Accepted Answer · 2013-11-29T14-31-00.000Z

JSFiddle

Использование классов в ваших полях вместо идентификаторов (идентификаторы должны быть уникальными), и их включение в родительский 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);
});

Вы также можете заменить свои скрытые поля атрибутами data-price как показано здесь. JSFiddle

Выбран в качестве ответа, это именно то, что мне нужно! Также мне нужно обновить общую стоимость корзины. Я уже пытался создать новую переменную total_price, а затем total_price + = total, но она не показывает мне общую цену на странице. Он не обновляет цену на странице, если я вставляю класс total_price в новый <div>, но если я вставляю в каждый уже созданный div, это работает. Можете ли вы дать мне небольшую помощь? Я думаю, что я что-то упустил ..
Вы имеете в виду что-то вроде этого jsfiddle.net/wXG7F/13 ?