0

我正在使用 javascript 购物车建立一个在线商店。但是，脚本在显示购物车时不允许只打印一两个值，但我需要这样做。

这是购物车的样子：

<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-price和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');

您只是将元素捕获为对象，而不是值。

现在您将元素作为对象，您需要提取值，在这种情况下，您的元素对象是 a div，因此您可以尝试.text()or .html()（获取 div 内的文本或 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);

更好的解决方案：

这将使div您拥有产品并匹配cartItem_SCI模式的可点击。

name因此，当用户单击您购物车的任何元素时，您将使用方法而不是（因为使用此方法将替换用户每次单击 div 时的产品信息）附加到divprice和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

对于一个项目，您可以获得这样的结果。但是由于您有多个项目，因此可以像这样制作一个对象。

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 回答