javascript - How do I make JS code not affect other DIV? -
hi try make list of item, have "add" , "minus" button each item. problem js code had control 2 items together. ex. if click "add" item1, item2 gets added well.
looks js functions works button elements. when click "button" element, buttons triggered.
how can add them individually?
ps: guess need specific id js trigger. thought add unique item id each 1 , trigger button under specific id other buttons under other item id don't triggered.
here html code:
<div class="row bb"> <div class="col-xs-12 food-container"> <a href="#"><img src="img/1.png" class="min-w img-responsive" /></a> <div class="food-detail"> <div class="food-name">test</div> <div class="food-sales">test：233333</div> <div class="food-price"> ￥50 <div class="food-edit"> <button class="btn btn-info" value="50.55" id="minus">-</button> <span class="num-sales"></span> <button class="btn btn-info" value="50.55" id="add">+</button> </div> </div> </div> </div> </div> <div class="row bb"> <div class="col-xs-12 food-container"> <a href="#"><img src="img/1.png" class="min-w img-responsive" /></a> <div class="food-detail"> <div class="food-name">test</div> <div class="food-sales">test:233333</div> <div class="food-price"> ￥50 <div class="food-edit"> <button class="btn btn-info" value="50.55" id="minus">-</button> <span class="num-sales"></span> <button class="btn btn-info" value="50.55" id="add">+</button> </div> </div> </div> </div> </div> here js:
var thetotal = 0; var thesales = 0; var minusbutton = document.getelementbyid('minus'); if (thesales == 0) { $(minusbutton).hide(); } $('button').click(function () { var id = this.id; if (id == "add") { $(minusbutton).show(); thetotal = number(thetotal) + number($(this).val()); thesales++; var num = thetotal.tofixed(2); $('.total').text("￥" + num); $('.total-num-of-sales').text(thesales + "份"); $('.num-sales').text(thesales); }; if (id == "minus") { thetotal = number(thetotal) - number($(this).val()); thesales--; var num = thetotal.tofixed(2); if ( thesales == 0 ) { $('.total').text(""); $('.total-num-of-sales').text(""); $('.num-sales').text(""); $(minusbutton).hide(); } else if ( thesales > 0 ) { $('.total').text("￥"+num); $('.total-num-of-sales').text(thesales + "份"); $('.num-sales').text(thesales); } }; });
don't use multiple id on same page
http://jsfiddle.net/bjc1c9tr/4/
check you
var thetotal = 0; var thesales = 0; var minusbutton = $('.minus'); if (thesales == 0) { $(minusbutton).hide(); } $('button').click(function(){ var id = $(this).attr('data'); if (id == "add") { $(this).parent().find('.minus').show(); thetotal = number($(this).parent().find('.num-sales').text()) + number($(this).val()); thesales = number($(this).parent().find('.num-sales').text()) + number(1); var num=thetotal.tofixed(2); $(this).parent().find('.total').text("￥"+num); $(this).parent().find('.total-num-of-sales').text(thesales+"份"); $(this).parent().find('.num-sales').text(thesales); }; if (id == "minus") { thetotal = number($(this).parent().find('.num-sales').text()) - number($(this).val()); thesales= number($(this).parent().find('.num-sales').text()) - number(1); var num=thetotal.tofixed(2); if ( thesales == 0) { $('.total').text(""); $(this).parent().find('.total-num-of-sales').text(""); $(this).parent().find('.num-sales').text(""); $(this).parent().find('.minus').hide(); } else if ( thesales > 0) { $(this).parent().find('.total').text("￥"+num); $(this).parent().find('.total-num-of-sales').text(thesales + "份") $(this).parent().find('.num-sales').text(thesales); } }; }); html (added new classes)
<div class="row bb"> <div class="col-xs-12 food-container"> <a href="#"><img src="img/1.png" class="min-w img-responsive" /></a> <div class="food-detail"> <div class="food-name">test</div> <div class="food-sales">test：233333</div> <div class="food-price">￥50 <div class="food-edit"> <button class="btn btn-info minus" value="50.55" data="minus">-</button> <span class="num-sales"></span> <button class="btn btn-info add" value="50.55" data="add">+</button> </div> </div> </div> </div> </div> <div class="row bb"> <div class="col-xs-12 food-container"> <a href="#"><img src="img/1.png" class="min-w img-responsive" /></a> <div class="food-detail"> <div class="food-name">test</div> <div class="food-sales">test:233333</div> <div class="food-price">￥50 <div class="food-edit"> <button class="btn btn-info minus" value="50.55" data="minus">-</button> <span class="num-sales"></span> <button class="btn btn-info add" value="50.55" data="add">+</button> </div> </div> </div> </div> </div>
Comments
Post a Comment