jQuery qiymati faqat kliklangan divda oshiradi

Qiymatni ortiqcha yoki kam rasmga bosish orqali oshirish kerak. Bu sahifada faqat bitta "item_quantity" blok bo'lganda yaxshi ishlaydi. Boshqa "item_quantity" bloklarini qo'shishni istasam, u noto'g'ri ishlaydi.

Qiymatni oshiruvchi JS kodi:

$('.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

0
Qiymatni tanlash uchun sinfi tanlash vositasidan foydalanasiz. Selektorda aniqroq foydalanishga harakat qiling, ya'ni identifikatorni tanlash.
qo'shib qo'ydi muallif Pankaj Kumar Singh, manba

6 javoblar

$(this).parent().find('.quan_numb')

http://codepen.io/anon/pen/ZeGqmd?editors=1010

2
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.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">
  
                        
        
  1
  
                                
        
</div>
<div class="item_quantity fll">
  
                        
        
  1
  
                                
        
</div>
</div> </div>
1
qo'shib qo'ydi

Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.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">
  
                        
        
  1
  
                                
        
</div>

<div class="item_quantity fll">
  
                        
        
  1
  
                                
        
</div>
</div> </div>
1
qo'shib qo'ydi

Buning sababi, jQuery bir qator elementlarga tegishli bo'lsa, qatorni qaytaradi. Tugma bilan bog'langan elementni aniqlash uchun quyidagi kodni ishlating.

var num = parseInt($(this).siblings('.quan_numb').text());

Codepen-ga qarang

0
qo'shib qo'ydi

Miqdori tanlash uchun sinf selektoridan foydalanasiz. Biron-bir tegib turishingiz kerak va har bir miqdordagi ma'lumotga murojaat qiling.

Siz eng yaqin .quan_numb ni topishingiz mumkin:

bor quan_numb = $ (bu) .closest (". item_quantity"). (". quan_numb");

Qaysi kod item_quantity bilan eng yaqin ota topadi, keyin bolani quan_num topadi.

codepen

0
qo'shib qo'ydi

Sinf o'rniga sinfdan foydalanishni ishlatganingiz uchun noto'g'ri ishlaydi

$('#item_quantity1 .plus').click(function() {
var num = parseInt($('#item_quantity1 .quan_numb').text());
$('#item_quantity1 .quan_numb').text(num + 1);
});

Agar siz boshqa ID-lardan ko'proq foydalanishni xohlasangiz

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb