У меня есть коды 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');
});
});
Да, пожалуйста, проверьте значение html "value attribute", используя контрольный элемент. Он все еще 1 - Giri 1 минута назад
Это ожидаемое поведение. Атрибут value
всегда будет значением по умолчанию. Свойство value
- это то, что изменяется, и это то, что вы видите в поле (и это то, что получает)
attr
тогда.
.val()
- правильный способ установить значение элемента.
(Я еще не могу прокомментировать). Что происходит, когда вы обновляете значение ввода, оно ничего не делает для фактической разметки, создавшей интерфейс. Поэтому, когда вы обновляете количество, и вы смотрите в devTools, вы видите только начальное значение.
Это в основном то, что сказал Нит.
Кроме того, НЕ используйте attr, это точка, attr()
все равно даст начальное значение, используйте .val()
Пример: http://jsfiddle.net/2APBa/3/
Другой пример, чтобы показать разницу между val()
и attr('value')
: http://jsfiddle.net/2APBa/5/
Попробуйте это вместо этого,
Это работало очень хорошо для меня.
$('.add_to_cart_button').attr('data-quantity', Your-input-variable);
Рабочий скрипт: 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