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 標準に関しては、私の知る限り、独自のタグ属性を定義できます。したがって、たとえば、各閉じるボタンの属性として、ゼロに設定する要素を渡すことができます。

<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 に答える