0

JavaScriptショッピングカートを使用してオンラインストアを構築しています。ただし、スクリプトでは、カートを表示するときに 1 つまたは 2 つの値のみを出力することはできませんが、これを行う必要があります。

カートはこんな感じ。

<div class="simpleCart_items">
    <div>
        <div class="headerRow">
            <div class="item-name">Tuote</div>
            <div class="item-price">Hinta</div>
            <div class="item-decrement">-</div>
            <div class="item-quantity">Määrä</div>
            <div class="item-increment">+</div>
            <div class="item-total">Yhteensä</div>
            <div class="item-remove">Poista</div>
        </div>
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-name">Teipit</div>
            <div class="item-price">€0.00</div>
            <div class="item-decrement"><a href="javascript:;" class="simpleCart_decrement"><img src="css/minus.png" alt="minus"></a>
            </div>
            <div class="item-quantity">3</div>
            <div class="item-increment"><a href="javascript:;" class="simpleCart_increment"><img src="css/plus.png" alt="plus"></a>
            </div>
            <div class="item-total">€0.00</div>
            <div class="item-remove"><a href="javascript:;" class="simpleCart_remove"><img src="css/remove.png" alt="Remove"></a>
            </div>
        </div>
        <div class="itemRow row-1 even" id="cartItem_SCI-3">
            <div class="item-name">Car Speaker -hajuste</div>
            <div class="item-price">€4.00</div>
            <div class="item-decrement"><a href="javascript:;" class="simpleCart_decrement"><img src="css/minus.png" alt="minus"></a>
            </div>
            <div class="item-quantity">1</div>
            <div class="item-increment"><a href="javascript:;" class="simpleCart_increment"><img src="css/plus.png" alt="plus"></a>
            </div>
            <div class="item-total">€4.00</div>
            <div class="item-remove"><a href="javascript:;" class="simpleCart_remove"><img src="css/remove.png" alt="Remove"></a>
            </div>
        </div>
        <div class="itemRow row-2 odd" id="cartItem_SCI-5">
            <div class="item-name">Teipit (Musta hiilikuitu)</div>
            <div class="item-price">€0.00</div>
            <div class="item-decrement"><a href="javascript:;" class="simpleCart_decrement"><img src="css/minus.png" alt="minus"></a>
            </div>
            <div class="item-quantity">1</div>
            <div class="item-increment"><a href="javascript:;" class="simpleCart_increment"><img src="css/plus.png" alt="plus"></a>
            </div>
            <div class="item-total">€0.00</div>
            <div class="item-remove"><a href="javascript:;" class="simpleCart_remove"><img src="css/remove.png" alt="Remove"></a>
            </div>
        </div>
    </div>
</div>

注:カートは JavaScript で記述されているため、ページ ソースには表示されず、ブラウザの検査モードでのみ表示されます。

item-nameでは、どうやって, item-priceandを集めるのでしょうitem-quantityか?

私はこれを試しました：

    var name = $('.item-name');
    var price = $('.item-price');
    var quantity = $('.item-quantity');
    var data = name + price + quantity;
    $('#items').html(data);

しかし、これは実際には何もしません。

4

3 に答える 3

1

これを行うとき - >$('.item-name');

要素をオブジェクトとしてキャプチャしているだけで、値はキャプチャしていません。

要素をオブジェクトとして取得したので、値を抽出する必要があります。この場合、要素オブジェクトは であるため、 or (div 内のテキストまたは html を取得する) をdiv試すことができます。.text().html()

(この状況ではtext()、値だけで作業しており、html に関連するものは何もないため、使用します)

これを試して：

var name = $('.item-name');
var price = $('.item-price');
var quantity = $('.item-quantity');
var data = name.text() + price.text() + quantity.text();
$('#items').html(data);

より良い解決策:

これにより、商品が含まれている がクリック可能になり、 cartItem_SCIパターンdivと一致します。

したがって、ユーザーがカートのいずれかの要素をクリックすると、 の代わりに メソッドを使用して divに添付されるname、priceおよびの値が取得されます(これを使用すると、ユーザーが div をクリックするたびに製品情報が置き換えられるため)。quantity$('#items')append()html() 

$(document).ready(function() {

    $('div[id^="cartItem_SCI-"]').css({ cursor:'pointer' });

    $('div[id^="cartItem_SCI-"]').click(function() {
        var name = $(this).find('.item-name');
        var price = $(this).find('.item-price');
        var quantity = $(this).find('.item-quantity');
        var data = name.text() + ' - ' + price.text() + ' - ' + quantity.text();
        $('#items').append(data + '<br/>');
    });

});​
于 2012-09-02T18:35:37.387 に答える
0

1つのアイテムの場合、このように取得できます。ただし、複数のアイテムがあるため、このように1つのオブジェクトを作成します。

var item={};

$('.item-name').each(function(){item.name=$(this).html()});
$('.item-price').each(function(){item.price=$(this).html()});
$('.item-quantity').each(function(){item.quantity=$(this).html()});


  var data='';    
        for(var i=0;i<item.length;i++)
               {
              data+=item[i].name+item[i].price+item[i].quantity;
                  }
        $('#items').html(data);
于 2012-09-02T18:33:47.923 に答える
0

クラスへの参照を取得しているだけです.html（）を追加して、クラスが適用された要素の内部htmlを取得します。

var name = $('.item-name').html();
于 2012-09-02T18:35:34.067 に答える