使用jQuery .eq更新值

我在購物車中有一個div，我試圖改變項目數以匹配屏幕左側的項目數。當您按下某個項目旁邊的向上和向下按鈕時，該數字會相應增加。不過，我無法訪問購物車中的相應分區。現在，購物車中的數字卡在0.代碼的第7行是我相信我的問題的地方。使用jQuery .eq更新值

這裏是一個的jsfiddle：http://jsfiddle.net/richcoy/MHMVC/

HTML：

<!doctype html> 
<html lang=en> 
<head> 
<meta charset=utf-8> 
<title>Number Updater</title> 
<link rel="stylesheet" href="css/styles.css"> 
</head> 
<body> 
    <div id="body_container"> 
<div id="product_container"> 
<div id="product_item_one" class="product_box"> 
    <div class="item_name">Item One</div> 
    <img src="http://placehold.it/90x80">  
    <div class="product">0</div> 
    <button class="up">Up</button> 
    <button class="down">Down</button> 
</div> 

<div id="product_item_two" class="product_box"> 
    <div class="item_name">Item Two</div> 
    <img src="http://placehold.it/90x80">  
    <div class="product">0</div> 
    <button class="up">Up</button> 
    <button class="down">Down</button> 
</div> 

<div id="product_item_three" class="product_box"> 
    <div class="item_name">Item Three</div> 
    <img src="http://placehold.it/90x80">   
    <div class="product">0</div> 
    <button class="up">Up</button> 
    <button class="down">Down</button> 
</div> 

<div id="product_item_four" class="product_box"> 
    <div class="item_name">Item Four</div> 
    <img src="http://placehold.it/90x80">  
    <div class="product">0</div> 
    <button class="up">Up</button> 
    <button class="down">Down</button> 
</div> 

<div id="product_item_five" class="product_box"> 
    <div class="item_name">Item Five</div> 
    <img src="http://placehold.it/90x80">   
    <div class="product">0</div> 
    <button class="up">Up</button> 
    <button class="down">Down</button> 
</div> 
</div> 

<div id="cart_container"> 
    <h3>Shopping Cart</h3> 
    <div id="cart_item_one" class="cart_product"> 
      <div class="item_name">Item One</div> 
      <div class="cart_product_number">0</div> 
    </div> 
    <div id="cart_item_two" class="cart_product"> 
      <div class="item_name">Item Two</div> 
      <div class="cart_product_number">0</div> 
    </div> 
    <div id="cart_item_three" class="cart_product"> 
      <div class="item_name">Item Three</div> 
      <div class="cart_product_number">0</div> 
    </div> 
    <div id="cart_item_four" class="cart_product"> 
      <div class="item_name">Item Four</div> 
      <div class="cart_product_number">0</div> 
    </div> 
    <div id="cart_item_five" class="cart_product"> 
      <div class="item_name">Item Five</div> 
      <div class="cart_product_number">0</div> 
    </div> 
    </div> 
</div><!-- end #body_container --> 
</body> 
</html>

的JavaScript：

$(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(); 
     $('.cart_product').eq($(this).closest('.cart_product_number').text(num)); 
    }); 

    $('.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) { 
      $('.cart_product').eq($(this).closest('.product_box').index()).hide(); 
     } else { 
      $('.cart_product').eq($(this).closest('.product_box').index()).show(); 
     } 
    }); 
});

來源

2012-07-21 Rich Coy

，這裏是我的解決方案：

$(document).ready(function() { 
    var num; 
    $('.up').click(function() { 
     num = parseInt($(this).siblings('.product').text()); 
     $(this).prevAll('.product').text(num + 1);  
     var box = $('.cart_product').eq($(this).closest('.product_box').index()); 
     box.show(); 
     box.children(".cart_product_number").text(num + 1); 
    });

希望這有助於

來源

2012-07-21 18:52:53 Simon

感謝@Simon。那很完美。我對這個jQuery的東西很新。有幾本書，但還沒有取得多大進展。 – 2012-07-21 19:01:45

您指出我們倒不決策意識給我就行了。您有：

$('.cart_product').eq($(this).closest('.cart_product_number').text(num));

打破了下來，你做這個的eq()：

$(this).closest('.cart_product_number').text(num)

其設定的.cart_product_num文本，然後返回該對象，你再喂到.eq()其預計一個整數，而不是一個jQuery對象。所以這行代碼一直是錯誤的。如果你解釋你試圖用這條路線來完成的事情，我們或許可以更具體地幫助你。

來源

2012-07-21 18:53:04 jfriend00

$(function() { 
    $('.up, .down').on('click', function() { 
     var productElem = $(this).siblings('.product'), 
      dir = $(this).is('.down'), 
      num = parseInt(productElem.text()); 
     if (num==1 && dir) { 
      productElem.text('0'); 
      $('.cart_product').eq($(this).closest('.product_box').index()).hide(); 
     }else{ 
      productElem.text(num + (dir?-1:+1)); 
      $('.cart_product').eq($(this).closest('.product_box').index()).show() 
           .find('.cart_product_number').text(num + (dir?-1:+1)); 
     } 
    }); 
});

FIDDLE

來源

2012-07-21 18:57:38 adeneo

使用jQuery .eq更新值

回答

相關問題