jQuery 프로그래밍 방식으로 효과를 내기

Question

나는 클라이언트 용 장바구니를 작성 중입니다. 제품 이미지 옆에 위아래 화살표가있어서 구입할 항목의 양을 선택할 수 있습니다. 장바구니를 자동으로 업데이트하도록하기 위해 노력하고 있습니다. 따라서 하나 이상의 값을 가진 항목은 자동으로 카트에 나타납니다.

각 제품에 대해 위/아래 버튼이 작동하지만 If 문에 대한 코드를 추가하면 모든 것이 손상됩니다. 또한 각 제품에 대해 If 문이 필요하고 상점에 70 개의 제품이있을 수 있으므로이 작업을 제대로 수행하고 있는지 잘 모르겠습니다.

If 문에서 변수를 사용하여 일치하는 장바구니 div를 얻고 표시되도록 할 방법이 있습니까? 여기

는 jsfiddle이 코드를 시도 http://jsfiddle.net/richcoy/7XnXF/

Answer 1

나는 이것이 당신이 찾고있는 무슨 생각합니다. eq()을 사용하면 특정 색인을 얻을 수 있고 index을 사용하면 현재 색인을 얻을 수 있습니다. 당신이 당신의 다른에 따라 .cart_product 사업부를 구조 때문에 div 그냥 클릭 div의 현재 인덱스를 얻을/표시하는 것을 사용할 수있는 것은 도움이 해당 div

$(document).ready(function() { 
    var num; 
    $('.up').click(function() { 
     num = parseInt($(this).siblings('.product').text()); 
     $(this).prevAll('.product').text(num + 1);   
     $('.cart_product').eq($(this).closest('.product_box').index()).show();// <-- on up click you will only ever show a product 

    }); 

    $('.down').click(function() { 
     num = parseInt($(this).siblings('.product').text()); 
     if (num > 0) { 
     $(this).siblings('.product').text(num - 1); 
     } 

     if (parseInt($(this).siblings('.product').text()) == 0) { <-- check if current val in div is == 0 
      $('.cart_product').eq($(this).closest('.product_box').index()).hide(); <-- if it is the hide the .cart_product div with the same index as the current "div" 
     } else { 
      $('.cart_product').eq($(this).closest('.product_box').index()).show(); 
     } 
    }); 
});​ 

http://jsfiddle.net/7XnXF/12/

Answer 2

입니다 :이 코드를 시도

$(document).ready(function() { 
    var num; 
    $('.up').click(function() { 
      num = parseInt($(this).prevAll('.product').text()); 
      $(this).prevAll('.product').text(num+1); 
     }); 

    $('.down').click(function() { 
      num = parseInt($(this).prevAll('.product').text()); 
      if(num>0){ 
      $(this).prevAll('.product').text(num-1); 
      }; 
     }); 

     // Uncommenting these breaks everything 
     if ($('#product_item_one').nextAll('.product').text(num > 0)){ 
      $('#cart_item_one').show(); 
     }; 

     if ($('#product_item_two').nextAll('.product').text(num > 0)){ 
      $('#cart_item_two').show(); 
     }; 

     if ($('#product_item_one').nextAll('.product').text(num <= 0)){ 
      $('#cart_item_one').hide(); 
     }; 

     if ($('#product_item_two').nextAll('.product').text(num <= 0)){ 
      $('#cart_item_two').hide(); 
     }; 

});​ 

Answer 3

을;

$(document).ready(function() { 
    var num; 
    var $flag = 0; 
    $('#cart_container').hide(); 
    $('.up').click(function() { 
     $flag++; 
      num = parseInt($(this).prevAll('.product').text()); 
      $(this).prevAll('.product').text(num+1); 
      $('#cart_container').show(); 
     }); 

    $('.down').click(function() { 
     $flag--; 
      num = parseInt($(this).prevAll('.product').text()); 
      if(num>0){ 
      $(this).prevAll('.product').text(num-1); 
      }; 
     if($flag < 1){ 
     $('#cart_container').hide(); 
     } 
     }); 

     // Uncommenting these breaks everything 
     if ($('#product_item_one').nextAll('.product').text(num > 0)){ 
      $('#cart_item_one').show(); 
     }; 

     if ($('#product_item_two').nextAll('.product').text(num > 0)){ 
      $('#cart_item_two').show(); 
     }; 

}); 

Here

는 바이올린입니다. 이 도움이

희망 ... :)