3

我正在开发具有一些高级 jQuery 功能的购物车。除了出现在购物车中商品旁边的从购物车中删除商品按钮之外，我已经完成了所有工作。我很难弄清楚如何定位需要更改回 0 的页面左侧的值。

我做了一个 jsfiddle：http: //jsfiddle.net/richcoy/GpUWn/

如果您按下向上按钮将商品添加到购物车，您将看到它出现在购物车中。该项目旁边是一个 X 按钮，用于将其从购物车中删除。单击该按钮时，它需要将购物车中的值和向上按钮旁边的值都设置回零。

我知道 JS 末尾的 close.click 函数会触发，但无法弄清楚是什么将左侧的值归零。

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


});
4

2 回答 2

2

如果您在产品上放置了参考以直接定位它们会更好，但对您的代码的调整将是：

请参阅此工作小提琴示例。

$('.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');
});
于 2012-07-24T17:42:13.730 回答
0

首先，id属性被理解为是唯一的。

接下来，对于 XHTML 标准，afaik，您可以定义自己的标签属性。因此，您可以传递要设置为零的元素，例如，作为每个关闭按钮的属性：

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

在这里，moo属性定义了哪个容器包含应该重置的值。然后，您只需为单击的按钮获取该属性的值，形成元素选择器，获取元素并重置其 HTML：

// format the ID selector
var item_id = '#' + $(this).attr('moo');
// format the concrete "input" selector, you need to reset
// and reset its HTML
jQuery(item_id + ' .product').html('0');

这是如何完成的：http: //jsfiddle.net/j99Cv/

于 2012-07-24T17:47:20.027 回答