jQuery - 두 위치에서 카트 값을 0으로 설정합니다.

Question

일부 고급 jQuery 기능이있는 쇼핑 카트에서 작업하고 있습니다. 장바구니의 항목 옆에 나타나는 장바구니에서 항목 제거를 제외하고는 모든 것이 작동합니다. 당신이를 누르면 http://jsfiddle.net/richcoy/GpUWn/

: 나는 내가 jsfiddle을했습니다 0

로 다시 변경해야하는 페이지의 왼쪽에있는 값을 대상으로하는 방법을 알아내는 힘든 시간을 보내고있어 버튼을 클릭하여 카트에 항목을 추가하면 장바구니에 항목이 표시됩니다. 항목 옆에는 X 단추가있어 카트에서 제거 할 수 있습니다. 해당 버튼을 클릭하면 카트의 값과 위로 버튼 옆의 값을 모두 0으로 설정해야합니다.

나는 JS 화재의 끝에 close.click 함수를 알고 있지만 왼쪽에있는 값을 0으로 만들기 위해 무엇이 들어가는지 알 수 없다.

HTML

<div id="body_container"> 

<div id="product_container"> 
    <div class="product_box"> 
     <div class="item_name">Item One</div> 
     <div class="product">0</div> 
     <button class="up category_one_up">Up</button> 
     <button class="down category_one_down">Down</button> 
    </div> 

    <div class="product_box"> 
     <div class="item_name">Item Two</div> 
     <div class="product">0</div> 
     <button class="up category_one_up">Up</button> 
     <button class="down category_one_down">Down</button> 
    </div> 

    <div class="product_box"> 
     <div class="item_name">Item Three</div>  
     <div class="product">0</div> 
     <button class="up category_one_up">Up</button> 
     <button class="down category_one_down">Down</button> 
    </div> 

    <div class="product_box"> 
     <div class="item_name">Item Four</div> 
     <div class="product">0</div> 
     <button class="up category_two_up">Up</button> 
     <button class="down category_two_down">Down</button> 
    </div> 

    <div class="product_box"> 
     <div class="item_name">Item Five</div>  
     <div class="product">0</div> 
     <button class="up category_three_up">Up</button> 
     <button class="down category_three_down">Down</button> 
    </div> 
</div> 

<div id="cart_container"> 
    <h3>Shopping Cart</h3> 
    <div class="catone_header"><h3>Category One</h3></div> 
     <div class="cart_product"> 
      <div class="item_name">Item One</div> 
      <input type="text" class="cart_product_number" value="0" /> 
      <button class="close">X</button> 
     </div> 
     <div class="cart_product"> 
      <div class="item_name">Item Two</div> 
      <input type="text" class="cart_product_number" value="0" /> 
      <button class="close">X</button> 
     </div> 
     <div class="cart_product"> 
      <div class="item_name">Item Three</div> 
      <input type="text" class="cart_product_number" value="0" /> 
      <button class="close">X</button> 
     </div> 
     <div class="cattwo_header"><h3>Category Two</h3></div> 
     <div class="cart_product"> 
      <div class="item_name">Item Four</div> 
      <input type="text" class="cart_product_number" value="0" /> 
      <button class="close">X</button> 
     </div> 
     <div class="catthree_header"><h3>Category Three</h3></div> 
     <div class="cart_product"> 
      <div class="item_name">Item Five</div> 
      <input type="text" class="cart_product_number" value="0" /> 
      <button class="close">X</button> 
     </div> 
    </div> 
</div><!-- end #body_container --> 

JS

$(document).ready(function() { 
    var num; 
    var catone = 0; 
    var cattwo = 0; 
    var catthree = 0; 

$('.up').click(function() { 
    num = parseInt($(this).siblings('.product').text()); 
    console.log(num); 
    $(this).prevAll('.product').text(num + 1); 
    $('.cart_product').eq($(this).closest('.product_box').index()).fadeIn('slow').find('.cart_product_number').val(num + 1); 
}); 

$('.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()).fadeOut('slow'); 
    } else { 
     $('.cart_product').eq($(this).closest('.product_box').index()).show().find('.cart_product_number').val(num - 1); 
    } 
}); 


// Category One 
$('.category_one_up').click(function() { 
    catone++; 
    if (catone > 0) { 
     $('.catone_header').fadeIn('slow'); 
    }; 
}); 

$('.category_one_down').click(function() { 
    if (catone > 0) { 
     catone--; 

     if (catone <= 0) { 
      $('.catone_header').fadeOut('slow'); 
     }; 
    }; 
}); 

// Category Two 
$('.category_two_up').click(function() { 
    cattwo++; 
    if (cattwo > 0) { 
     $('.cattwo_header').fadeIn('slow'); 
    }; 
}); 

$('.category_two_down').click(function() { 
    if (cattwo > 0) { 
     cattwo--; 

     if (cattwo <= 0) { 
      $('.cattwo_header').fadeOut('slow'); 
     }; 
    }; 
}); 

// Category Three 
$('.category_three_up').click(function() { 
    catthree++; 
    if (catthree > 0) { 
     $('.catthree_header').fadeIn('slow'); 
    }; 
}); 

$('.category_three_down').click(function() { 
    if (catthree > 0) { 
     catthree--; 

     if (catthree <= 0) { 
      $('.catthree_header').fadeOut('slow'); 
     }; 
    }; 
}); 

$('.close').click(function() { 
    $(this).parent('div.cart_product').fadeOut('slow'); 
    $(this).prev('.cart_product_number').val(0); 
}); 


}); 

Answer 1

당신이 직접 대상 제품에 대한 참조를 배치 한 경우가 더 좋을 것이다, 그러나 당신의 코드에 조정 것 be :

이 부분을 참조하십시오. working fiddle 예.

$('.close').click(function() { 

    // get the name of the item 
    var myProd = $(this).closest('div').find('.item_name').html(); 

    // find it on the left list 
    $target = $('#product_container').find('.item_name').filter(function() { 
    return $(this).html().match(myProd); 
    }); 

    // reset to 0   
    $target.next().html('0'); 

    // your code... 
    $(this).parent('div.cart_product').fadeOut('slow'); 
}); 

Answer 2

첫 번째 것은 id 속성이 고유 한 것으로 인식된다는 것입니다.

다음으로 XHTML 표준 인 afaik의 경우 사용자 고유의 태그 속성을 정의 할 수 있습니다. 그래서, 당신은 각 가까운 버튼의 속성으로서, 당신은 예를 들어 0으로 설정 할 요소를 전달할 수 : 여기

<button class="close" moo="product_item_1">X</button> 

는 moo 속성을 재설정해야하는 값을 포함하는 컨테이너 정의합니다. 그럼 당신은 그냥 클릭 버튼의이 속성의 값을 가져 요소 선택기를 형성 요소를 얻고 그 HTML을 재설정 : 나는 당신을 생각하지 않는다 http://jsfiddle.net/j99Cv/