-1
私はjqueryを初めて使用しています。私は少しのeshopページを操作する必要があります。 +/-をクリックするか手動で入力値を変更する場合は、最も近いa
リンクのdata-quantity
を更新する必要があります。ここでjquery最新の入力変更時のデータ量を更新
(function($) {
function createQTYButtons(target) {
// Quantity buttons
$(target).find('div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)').addClass('buttons_added').append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />');
// Target quantity inputs on product pages
$(target).find('input.qty:not(.product-quantity input.qty)').each(function() {
var min = parseFloat($(this).attr('min'));
if (min && min > 0 && parseFloat($(this).val()) < min) {
$(this).val(min);
}
});
$(target).on('click', '.plus, .minus', function() {
// Get values
var $qty = $(this).closest('.quantity').find('.qty'),
currentVal = parseFloat($qty.val()),
max = parseFloat($qty.attr('max')),
min = parseFloat($qty.attr('min')),
step = $qty.attr('step');
var $qty_cart = $(this).closest('.text-center').find('.addt_to_cart_button'),
qty_cart_val = parseFloat($qty_cart.data("quantity"));
console.log(qty_cart_val);
// 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');
});
}
// jQuery plugin.
$.fn.addQty = function() {
return this.each(function(i, el) {
createQTYButtons(el);
});
}
})(jQuery);
jQuery('.small-product').addQty();
はフィドルです: - :私は(一部の商品説明内の)コードの一部を以下している
ボタンをし、クリックされたとき、その最小値と最大値を制御
<div class="small-product">
<div class="text-center">
<div class="add-to-cart-button">
<a href="/zeleny/kategorie-produktu/vareni/?removed_item=1&add-to-cart=3854" data-quantity="1" rel="nofollow" data-product_id="3854" class="ajax_add_to_cart add_to_cart_button product_type_simple button alt-button small clearfix">Do košíku</a>
</div>
<div class="quantity">
<input type="number" step="1" min="1" max="8" name="quantity" value="1" title="Množství" class="input-text qty text" size="4">
</div>
</div>
<div class="small-product">
<div class="text-center">
<div class="add-to-cart-button">
<a href="/zeleny/kategorie-produktu/vareni/?removed_item=1&add-to-cart=3854" data-quantity="1" rel="nofollow" data-product_id="3854" class="ajax_add_to_cart add_to_cart_button product_type_simple button alt-button small clearfix">Do košíku</a>
</div>
<div class="quantity">
<input type="number" step="1" min="1" max="13" name="quantity" value="1" title="Množství" class="input-text qty text" size="4">
</div>
</div>
このjqueryのは+追加します: https://jsfiddle.net/kybernaut/8aam5861/
事前にどうもありがとう
最近のほとんどのブラウザは自動的に 'タイプ= number'でこれを行います。なぜ自分でこれを行う必要がありますか? – Barmar