How Do I Make Js Code Not Affect Other Div?

Hi I am try to make a list of item, I have 'add' and 'minus' button for each item. The problem is that the JS code I had control two items together. ex. if I click 'add' for item1,

Solution 1:

Don't use multiple id on same page

http://jsfiddle.net/bjc1c9tr/4/

Check this will help you

var theTotal = 0;
var theSales = 0;
var minusButton = $('.minus');
if (theSales == 0) {
    $(minusButton).hide();
}

$('button').click(function(){
    varID = $(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();
            }
            elseif ( 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)

<divclass="row bb"><divclass="col-xs-12 food-container"><ahref="#"><imgsrc="img/1.png"class="min-w img-responsive" /></a><divclass="food-detail"><divclass="food-name">test</div><divclass="food-sales">test：233333</div><divclass="food-price">￥50
                                                <divclass="food-edit"><buttonclass="btn btn-info minus"value="50.55"data="minus">-</button><spanclass="num-sales"></span><buttonclass="btn btn-info add"value="50.55"data="add">+</button></div></div></div></div></div><divclass="row bb"><divclass="col-xs-12 food-container"><ahref="#"><imgsrc="img/1.png"class="min-w img-responsive" /></a><divclass="food-detail"><divclass="food-name">test</div><divclass="food-sales">test:233333</div><divclass="food-price">￥50
                                                    <divclass="food-edit"><buttonclass="btn btn-info minus"value="50.55"data="minus">-</button><spanclass="num-sales"></span><buttonclass="btn btn-info add"value="50.55"data="add">+</button></div></div></div></div></div>

Solution 2:

$('button').click(function(){
varID = this.id;
if (ID == "add") {
    $(minusButton).show();
    theTotal = Number(theTotal) + Number($(this).val());
    theSales = Number($(this).parent().find('.num-sales').text())+1;
    var num=theTotal.toFixed(2);
     $('.total').text("￥"+num); 
     $('.total-num-of-sales').text(theSales+"份"); 
    $(this).parent().find('.num-sales').text(theSales);
};

if (ID == "minus") {
        theTotal = Number(theTotal) - Number($(this).val());
    theSales = Number($(this).parent().find('.num-sales').text())-1;
        var num=theTotal.toFixed(2);
        if ( theSales == 0) {
             $('.total').text(""); 
             $('.total-num-of-sales').text(""); 
            $(this).parent().find('.num-sales').text("");
             //$('.num-sales').text("");
             $(minusButton).hide();
        }
        elseif ( theSales > 0) {
             $('.total').text("￥"+num); 
             $('.total-num-of-sales').text(theSales + "份");
             $(this).parent().find('.num-sales').text(theSales);
             //$('.num-sales').text(theSales);

        }

};

$(this).parent().find('.num-sales').text(theSales); By this way you can get the parent of clicked button and change the value of .num-sales of the selected parent

https://jsfiddle.net/s2u9eb36/ refer this one

Solution 3:

You are mixing the elements because of your id and class selectors.

When you select elements through jQuery by class (like $('.num-sales')), jQuery gives you a collection of all elements that match the selector. In your case, that would be both class="num-sales" elements.

Whenever you then call a function (like .html(theSales)), it will apply that function to each element in the collection, that's why your code is affecting more than one element.

You will need to find a way to distinguish one element of the other. There's quite a few options here, but I like doing it by limiting the scope of my selectors. With this I mean I would first find the food-detail div that contains the clicked element, and then find .num-sales etc... only within that element.

Then you can do the following in your button clicks:

$('button').click(function(){
    varID = this.id;
    var element = $(this) //make a jQuery object of the clicked button// finds the first parent element with class food-detailvar container = element.closest('.food-detail');

    // find .num-sales within containervar numSales = container.find('.num-sales') 

   // continue...
});

in short:

1. when a button is clicked, find the food-detail div the button is in
2. .find in only that container instead of using selectors on the entire document

Edit: you should really change the id="Add" and id="minus" on your buttons, ids should be unique on the entire document. You can simply add add or minus as a class instead and check for it with element.hasClass('add').