Question

我想在js中做一个推车系统，以便用户可以点击一个div来添加/删除到购物车（切换）。我可以切换购物车清单，但不能总计价格。知道该怎么做??

这些是可以添加到购物车的产品

<div class="col-xs-6 col-sm-3 col-md-2">
<div id="feature-card" class="card" data-option-id="104" data-name="Activity Feed" data-price="200">
    <div class="card-content text-center">
        <i id="feature-icon" class="fa fa-feed"></i>
        <p>
            <?php _e( 'Activity Feed', 'techcare' ); ?>
        </p>
    </div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div id="feature-card" class="card" data-option-id="103" data-name="Dashboard" data-price="200">
    <div class="card-content text-center">
        <i id="feature-icon" class="fa fa-dashboard"></i>
        <p>
            <?php _e( 'Dashboard', 'techcare' ); ?>
        </p>
    </div>
</div>

购物车中的总计算打印div

<div class="col-md-9 col-sm-9 col-xs-9">
   <p id="left-margin-card-content" class="text-left"><strong><?php _e( 'Total', 'techcare' ); ?></strong></p>
</div>

我用这个js显示/隐藏div到购物车列表

< script >
$(document).ready(function() {

    $('.card').one('click', function(event) {
        var id = $(this).attr('data-option-id'); //get specific div data id
        var name = $(this).attr('data-name'); //get specific div data name
        var price = $(this).attr('data-price'); //get specific div data price

        var NewItem = '<span id="' + id + '"><div class="col-md-9 col-sm-9 col-xs-9" ><p id="left-margin-card-content" class="text-left">' + name + '</p></div><div class="col-md-3 col-sm-3 col-xs-3" id="' + price + '"><p id="left-margin-card-content" class="text-right">$<span id="item-price">' + price + '</span></p></div><span>';

        var Item = $(NewItem).insertBefore('#features');


        $('.card[data-option-id = ' + id + ']').toggleClass("active-feature"); //click div toogle class



        $('.card[data-option-id = ' + id + ']').click(function(event) {
            $('.card[data-option-id = ' + id + ']').toggleClass("active-feature");

            $('#' + id).toggle();


        });

    });
});
</script>

Answer 1

我已经简化了上面的例子。在每个购物车项目上，添加一个名为cart-item的类（包含data-price的同一元素）。

我循环浏览每个元素并添加找到的data-price。

＆＃13;

var total = 0;

$('.active-feature').each(function() {
    total += parseInt($(this).attr('data-price'));
});

console.log(total);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="active-feature" data-price="200"></div>
<div class="active-feature" data-price="100"></div>
<div class="active-feature" data-price="500"></div>
<div class="cart-item" data-price="10000" style="display: none;"></div> <!-- not active - don't add it! -->

＆＃13;

Answer 2

您可以使用：visible选择器查找仅可见。

$(".someDiv:visible").each(....);

您可以使用.not（）选择器仅查找隐藏的内容。

$(".someDiv").not(":visible").each(....);

我认为您可以使用这一行在代码中执行相同的操作。

如果div变为隐藏，如何使用他们的数据计算所有可见div的总和也会重新计算

2 个答案: