プラスまたはマイナスの画像をクリックすると、値を大きくする必要があります。それはページ上の唯一の "item_quantity"ブロックであるときにうまく動作します。しかし、別の "item_quantity"ブロックを追加したい場合は正しく動作しません。値を大きくjQueryはクリックしたdivでのみ値を増やします
JSコード：
$('.item_quantity .plus').click(function() {
var num = parseInt($('.item_quantity .quan_numb').text());
$('.item_quantity .quan_numb').text(num + 1);
});
http://codepen.io/Vlasov/pen/dvogmp?editors=1010
$(this).parent().find('.quan_numb')
あなたは数量を選択するためのクラスセレクタを使用しています。 あなたはより具体的なタッチで、個々の数量を参照する必要があります。
あなたは実行することにより、最も近い.quan_numbを見つけることができます。
item_quantityと最も近い親を見つける
var quan_numb = $(this).closest(".item_quantity").find(".quan_numb");
は、その後、子供quan_numを見つけました。
あなたはより多くの異なるIDの
を使用追加したい場合は代わりにクラス
$('#item_quantity1 .plus').click(function() {
var num = parseInt($('#item_quantity1 .quan_numb').text());
$('#item_quantity1 .quan_numb').text(num + 1);
});
のIDを使用してクラスを使用しているので、それは間違って働きますjQueryが配列を返すのは、sele ctorは複数の要素に属します。次のコードを使用して、ボタンとペアになる要素を指定します。
var num = parseInt($(this).siblings('.quan_numb').text());
$('.item_quantity .plus').click(function() {
var num = parseInt($(this).parent().find('.quan_numb').html());
$(this).parent().find('.quan_numb').html(num + 1);
});
$('.item_quantity .minus').click(function() {
var num = parseInt($(this).parent().find('.quan_numb').html());
if (num > 1) {
$(this).parent().find('.quan_numb').html(num - 1);
}
});.minus img, .plus img{
width: 20px;
cursor: pointer;
}
.quan_numb{
font-size: 24px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item_quantity fll">
<span class="minus">
\t \t \t <img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/minus.png" alt="">
\t </span>
<span class="quan_numb">1</span>
<span class="plus">
\t \t \t \t <img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/plus.png" alt="">
\t </span>
</div>
<div class="item_quantity fll">
<span class="minus">
\t \t \t <img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/minus.png" alt="">
\t </span>
<span class="quan_numb">1</span>
<span class="plus">
\t \t \t \t <img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/plus.png" alt="">
\t </span>
</div>これを試してみてください：
$('.item_quantity .plus').click(function() {
var num = parseInt($(this).siblings('.item_quantity .quan_numb').text());
$(this).siblings('.item_quantity .quan_numb').text(num + 1);
});
$('.item_quantity .minus').click(function() {
var num = parseInt($(this).siblings('.item_quantity .quan_numb').text());
if (num > 1) {
$(this).siblings('.item_quantity .quan_numb').text(num - 1);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item_quantity fll">
<span class="minus">
\t \t \t <img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/minus.png" alt="">
\t </span>
<span class="quan_numb">1</span>
<span class="plus">
\t \t \t \t <img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/plus.png" alt="">
\t </span>
</div>
<div class="item_quantity fll">
<span class="minus">
\t \t \t <img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/minus.png" alt="">
\t </span>
<span class="quan_numb">1</span>
<span class="plus">
\t \t \t \t <img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/plus.png" alt="">
\t </span>
</div>
クラスセレクタを使用して値を選択しています。セレクタでより具体的に使用してください。つまり、idセレクタを使用してください。 –