jQuery - количество товара не меняется при нажатии кнопки «плюс»

0

У меня есть коды jQuery. Когда я нажимаю кнопку +, его предполагается увеличить значение на 1. Но как-то его не работает. Может кто-нибудь сказать мне, что случилось с моим кодом?

JSFiddle

Вот демон jsfiddle. Пожалуйста, просмотрите входное значение с помощью элемента "Inspect"

HTML

<div class="showbutton02">
            <form action="/take-away/?add-to-cart=79" class="cart myform" method="post" enctype="multipart/form-data">
                <div class="quantity buttons_added"><input type="button" value="-" class="minus"><input type="number" step="1" name="quantity" value="1" title="Qty" class="input-text qty text"><input type="button" value="+" class="plus"></div>
<div class="linkbtn02"><button type="submit" data-product_id="79" data-product_sku="" data-quantity="1" class="add_to_cart_button button product_type_simple">Add to cart</button></div>            </form>
            </div>

JS

jQuery(document).ready(function($) {


    $(document).on( 'click', '.plus, .minus', function() {

        // Get values
        var $qty        = $(this).closest('.quantity').find(".qty");
        var currentVal  = parseFloat( $qty.val() );
        var max         = parseFloat( $qty.attr('max') );
        var min         = parseFloat( $qty.attr('min') );
        var step        = $qty.attr('step');

        // Format values
        if ( ! currentVal || currentVal == "" || currentVal == "NaN" ) currentVal = 0;
        if ( max == "" || max == "NaN" ) max = '';
        if ( min == "" || min == "NaN" ) min = 0;
        if ( step == 'any' || step == "" || step == undefined || parseFloat( step ) == "NaN" ) step = 1;

        // Change the value
        if ( $(this).is('.plus') ) {

            if ( max && ( max == currentVal || currentVal > max ) ) {
                $qty.val( max );
            } else {
                $qty.val( currentVal + parseFloat( step ) );
            }

        } else {

            if ( min && ( min==currentVal || currentVal < min ) ) {
                $qty.val( min );
            } else if ( currentVal > 0 ) {
                $qty.val( currentVal - parseFloat( step ) );
            }

        }

        // Trigger change event
        $qty.trigger('change');
    });


});
  • 1
    он работает в jsfiddle .. я что-то упустил?
  • 0
    @ patel.milanb Да, пожалуйста, проверьте HTML-значение «атрибута значения» с помощью элемента inspect. Это по-прежнему 1
Показать ещё 9 комментариев
Теги:

4 ответа

2
Лучший ответ

Да, пожалуйста, проверьте значение html "value attribute", используя контрольный элемент. Он все еще 1 - Giri 1 минута назад

Это ожидаемое поведение. Атрибут value всегда будет значением по умолчанию. Свойство value - это то, что изменяется, и это то, что вы видите в поле (и это то, что получает)

  • 0
    Хорошо, спасибо за ваше объяснение. Я буду использовать attr тогда.
  • 1
    @ Гири Почему? .val() - правильный способ установить значение элемента.
Показать ещё 2 комментария
1

(Я еще не могу прокомментировать). Что происходит, когда вы обновляете значение ввода, оно ничего не делает для фактической разметки, создавшей интерфейс. Поэтому, когда вы обновляете количество, и вы смотрите в devTools, вы видите только начальное значение.

Это в основном то, что сказал Нит.

Кроме того, НЕ используйте attr, это точка, attr() все равно даст начальное значение, используйте .val()

Пример: http://jsfiddle.net/2APBa/3/

Другой пример, чтобы показать разницу между val() и attr('value'): http://jsfiddle.net/2APBa/5/

0

Попробуйте это вместо этого,

Это работало очень хорошо для меня.

$('.add_to_cart_button').attr('data-quantity', Your-input-variable);
0

Рабочий скрипт: http://jsfiddle.net/2APBa/8/

это то, что вы хотите..

 $(document).on('change', '.qty', function () {
            $('.add_to_cart_button').attr('data-quantity', $(this).val());
        });

когда вы нажимаете на + -, значения изменяются в .add_to_cart_button атрибута data-quantity .add_to_cart_button

  • 0
    На самом деле на моей странице есть много элементов с одинаковой структурой. Так что, думаю, это повлияет и на другие элементы. Ты не думаешь?
  • 0
    у вас должны быть согласованные имена классов в вашей структуре HTML .. иначе да, это может повлиять на атрибут данных другого элемента с тем же именем класса ...
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню