jQuery以編程方式實現Div

-1

我正在爲客戶購物車。我們在產品圖片旁邊上下箭頭以選擇要購買的商品數量。我試圖讓它自動更新購物車。因此，任何具有多個值的項目都會自動出現在購物車中。jQuery以編程方式實現Div

我有上下按鈕爲每個產品工作，但是當我添加If語句的代碼時，它打破了一切。我也不確定我是否正確地做到這一點，因爲我需要每個產品的If語句，並且商店中可能有70種產品。

有沒有辦法在If語句中使用變量來獲得匹配的購物車div並使其顯示？

這裏是一個的jsfiddle http://jsfiddle.net/richcoy/7XnXF/

2012-07-21 Rich Coy

我認爲這是你在找什麼。您可以使用eq()獲取特定索引，並使用index獲取當前索引。既然你根據你的其他結構化的.cart_product DIV 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/

來源

2012-07-21 13:09:43

完美，謝謝！ – 2012-07-21 14:29:46

我已經使用此代碼，我將如何訪問.cart_product div內的另一個div？我需要更新項目的數量，以便與頁面左側的項目數量相匹配。我有一個新的jsfiddle來幫助解釋。我在代碼中添加了第7行，但它沒有正確訪問我需要更新的div。 http://jsfiddle.net/richcoy/MHMVC/ – 2012-07-21 15:00:13

試試這個代碼：

$(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(); 
     }; 

});

來源

2012-07-21 11:44:51

這幫助。即使num值爲0，購物車div仍然會顯示。 – 2012-07-21 12:25:05

試試這個代碼;

$(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是小提琴。

希望這有助於... :)

來源

2012-07-21 13:00:16

jQuery以編程方式實現Div

回答

相關問題