Динамическое изменение полей счетчика

363
15 декабря 2016, 16:28

У меня есть счетчик, подсчитывающий количество и сумму конкретной продукции. В span с классом quantity хранится количество и сумма в виде "13 x 70 руб." input c type="number" должен получать значение quantity, т.е. число 13. input c type="button" увеличивают/уменьшают значение переменной input c type="number", что должно также отражаться в quantity, а сумма - перезаписываться в `amount в полном виде, т.е. в виде "13*70 = 910 руб".

Сложность возникает в преобразовании строк в значения и в автоматическом отслеживании изменений с обменом информации между селекторами. В коде написал смысл того, что хочу получить.

var quantity = $(".quantity").text(); 
$(".input-text.qty.text").val(quantity); 
var amount = $(".amount").text(); 
var total = amount * quantity; 
$(".quantity").text() = $(".input-text.qty.text").val(quantity); 
$(".amount").text() = total;
<span class="quantity">13 × <span class="amount">70&nbsp;руб.</span></span> 
<div class="quantity buttons_added"> 
    <input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4"> 
    <input type="button" value="+1" id="button_plus" class="plus"> 
    <input type="button" value="-1" id="button_minus" class="minus"> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

Идея в том, что повесить обработчик события change на элемент #num_count (который и .input-text.qty.text) и обработчики события click на элементы #button_plus и #button_minus. В этих обработчиках вызывается функция changeCountValue, которая меняет значения во всех нужных полях. Заодно добавлены проверки на валидность (не меньше минимума и не больше максимума) значения.

$(document).ready(function() { 
    var $count = $('#num_count'); 
    var $quantity = $(".quantity"); 
    var amount = parseInt($('.amount').text()); 
    var $sum = $('.sum'); 
    var minCount = parseInt($count.attr('min')); 
    var maxCount = parseInt($count.attr('max')); 
     
    $count.val($quantity.text()); 
     
    $count.on('change', function() { 
        changeCountValue(0); 
    }); 
     
    $('#button_plus').on('click', function() { 
        changeCountValue(1); 
    }); 
     
    $('#button_minus').on('click', function() { 
        changeCountValue(-1); 
    }); 
     
    function changeCountValue(change) 
    { 
        var newCount = parseInt($count.val()) + change; 
        if (newCount < minCount) { 
            newCount = minCount;         
        } 
        else if (newCount > maxCount) { 
            newCount = maxCount; 
        } 
        $count.val(newCount); 
        $quantity.text(newCount); 
        $sum.text(newCount * amount); 
    } 
});
<span class="quantity">13</span> × <span class="amount">70</span> = <span class="sum">910</span> руб. 
<div class="buttons_added"> 
    <input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4" /> 
    <input type="button" value="+1" id="button_plus" class="plus" /> 
    <input type="button" value="-1" id="button_minus" class="minus" /> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

READ ALSO
Изменение ссылки внутри iframe, загруженном с другого сайта
HTML

Изменение ссылки внутри iframe, загруженном с другого сайта

Как изменить статичную ссылку в iframe, загруженном с другого сайта?

 407
Создание адаптивного баннера [закрыто]
HTML

Создание адаптивного баннера [закрыто]

Как можно сделать адаптивный баннер? Баннер используется на страницы SharePoint 2010, необходимо решение на CSS, без использования bootstrap и других...

 344
Не работает валидация форм с помощью Bootstrap
HTML

Не работает валидация форм с помощью Bootstrap

Доброго времени суток, форумчане!

 599
Удаление родительского div&#39;a
HTML

Удаление родительского div'a

Сегодня я уже спрашивала как добавлять новый div по нажатию кнопки, а теперь мне нужно удалять строку, и у меня снова ничего не выходит

 403