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

Popular posts from this blog

python - pip install -U PySide error -

-
does know how avoid following error when running pip install -u pyside per official website instructions here: https://pypi.python.org/pypi/pyside/#installing-pyside-on-a-mac-os-x-system note have done brew install qt successfully. you using pip version 7.0.3, version 7.1.2 available. should consider upgrading via 'pip install --upgrade pip' command. collecting pyside using cached pyside-1.2.4.tar.gz installing collected packages: pyside running setup.py install pyside complete output command /applications/anaconda/bin/python -c "import setuptools, tokenize;__file__='/private/var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-build-cpxemt/pyside/setup.py';exec(compile(getattr(tokenize, 'open', open)(__file__).read().replace('\r\n', '\n'), __file__, 'exec'))" install --record /var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-0r7hri-record/install-record.txt --single-version-externally-managed --compile: ...
Read more

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

-
simple question: i'm trying initialize array within c++ class declaration: using namespace std; #include <string> class myclass{ public: string myarray[] = {"a","b","c"}; }; and i'm getting error: error: brace-enclosed initializer not allowed here before ‘{’ token no, without complied c++11 compiler, cannot initialize member array in declaration. have initialize array member in constructor. , don't use open array if know number of elements initialize array.
Read more

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -

-
i trying add nodes dagre graph through cityscape.js. problem nodes not painted. code have: cy.add({ group: "nodes", data: { id:"n0",name:"n0",weight: 75 }, }); $.ajax(url).done(function(jsontree){ var newnodes=[]; for(var i=1;i<6;i++){ //var child = jsontree.result[i]; newnodes.push( { group: "nodes", data: { id: "n"+i, name:"n"+i}}, { group: "edges", data: { id: "e"+i, source: "n0", target: "n"+i } } ); } cy.add(newnodes); any ideas? have used loaded function reload graph not work. not know if have use specific function reload graph. thank in advance. you need add positions new nodes. cytoscape.js docs : it important note positions of newly added nodes must defined when calling cy.add(). nodes can not placed in graph without valid position — otherwise not displayed. yo...
Read more