Question

我正在建立一个带有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);

但这实际上并没有做任何事情。

Answer 1

这样做时 - ＆gt; $('.item-name');

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

现在您已将元素作为对象，您需要提取值，在这种情况下，您的元素对象是div，因此您可以尝试.text()或.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的price，quantity和$('#items')值使用append()方法代替html() （因为每次用户点击div时使用此方法都会替换产品信息）

$(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/>');
    });

});

Answer 2

对于一个项目你可以得到这样的。但是因为你有多个项目就像这样做一个对象。

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

Answer 3

您只是获取对该类的引用，添加.html（）以获取该类所应用的元素的内部html。

var name = $('.item-name').html();

从页面获取特定数据并将其写入div

3 个答案:

更好的解决方案：