この下markup
に、 が表示されますclass name is same for every button
。ボタンの同じクラス名を持つボタンの数が増えました。任意のボタンをクリックすると、 の値のみが取得されますlast button value
。last div
ここで、値がであることがわかります30
。そのため、すべてのボタンをクリックすると、最後の値のみが取得されます。私のhtmlマークアップはこのようなものです
<div class="cart">
<div>Qty:
<input type="text" value="10" size="2" name="quantity">
<input type="hidden" value="42" size="2" name="product_id">
<input type="button" class="button-cart" value="Add to Cart">
</div>
<div>Qty:
<input type="text" value="20" size="2" name="quantity">
<input type="hidden" value="42" size="2" name="product_id">
<input type="button" class="button-cart" value="Add to Cart">
</div>
<div>Qty:
<input type="text" value="30" size="2" name="quantity">
<input type="hidden" value="42" size="2" name="product_id">
<input type="button" class="button-cart" value="Add to Cart">
</div>
</div>
今私のjQueryスクリプトはこのようなものです
$('.button-cart').click(function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
}
}
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
//$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
setTimeout(opencartpage(),1000);
}
}
});
});