Question

遵循以下代码的逻辑：

<div id="add-to-cart-widget">
<div class="simpleCart_items"><div class="cartHeaders">
<div class="itemthumb">thumb</div><div  class="itemTotal">Total</div><div class="itemremove">remove</div>  </div>
</div>
<div id="if-cart-empty" style="display: none">Your cart is empty.</div>

如果存在.itemContainer，则商品只会显示在购物车中。对于添加到购物车的每个商品，都会创建一个新容器并将其放在#add-to-cart-widget内。

使用jQuery，如何检查#add-to-cart-widget是否显示.itemContainer，如果没有，则显示div #if-cart-empty？

-------编辑-------（适用于jsFiddle，但不适用于现场）

这是我在网站上发布的确切代码。我在.click上添加了额外的.itemremove个活动，因此您可以点击“移除”容器并对其进行测试：

<div id="add-to-cart-widget">
<div class="simpleCart_items">
    <div class="cartHeaders">
            <div class="itemthumb">thumb</div>
            <div  class="itemTotal">Total</div>
            <div class="itemremove">remove</div>
        </div>
</div>
<div id="if-cart-empty" style="display:none;">Your cart is empty.</div>
    </div>    

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
if (!$('.itemContainer').is(":visible")) {
    $('#if-cart-empty').show();
} else {
    $('#if-cart-empty').hide();
}

$('.itemremove').click(function(){
 $('.itemContainer').hide();
});
    });
</script>

<style type='text/css'>
  .itemContainer {background:red;}
</style>

FORGOT链接到测试站点：

http://sitetestexample.blogspot.com/p/cart-empty-test.html

当项目被添加到购物车时，这就是#add-to-cart-widget的样子（上面的第一个代码是没有购物车中任何商品的样子）：

<div id="add-to-cart-widget">
<div class="simpleCart_items">
<div class="cartHeaders">
<div class="itemthumb">thumb</div>
<div class="itemTotal">Total</div>
<div class="itemremove">remove</div></div>
    <div class="itemContainer"><div class="itemthumb">
       <img border="0" src="http://3.bp.blogspot.com/-CB2o1hPryRo/Ub54iT3ggVI/AAAAAAAAFJY/W6iBiOFaggo/s1600/picture+001.jpg">
</div>
<div class="itemTotal">$80,000.00</div>
<div class="itemremove"><a href="javascript:;" onclick="simpleCart.items['c3'].remove();">x</a> 
</div></div></div>
<div id="if-cart-empty" style="display:none;">Your cart is empty.</div>
</div>

Answer 1

这样的事情会起作用：

function check_cart(){
   n = $('.itemContainer .itemthumb').length;
   if(n>0){ 
       $('.itemContainer').css('display','block');
       $('#if-cart-empty').css('display','none');
   }else{
       $('.itemContainer').css('display','none');
       $('#if-cart-empty').css('display','block');
   }
}

$(document).ready(function(){
    $('.itemremove, .itemadd').click(function(){
       check_cart();
    });
});

Answer 2

更新答案

DEMO http://jsfiddle.net/yeyene/BAs2m/8/

删除项目后，您需要再次检查itemContainer是否仍然存在。

由于您要删除项目，我建议您使用.remove()代替.hide()

checkCart();

$('.itemremove').click(function(){    
    $('.itemContainer').remove();  
    checkCart();
});

function checkCart(){
    var item = $('.itemContainer');
    if (item.length > 0) {
        $('#if-cart-empty').hide();
    } else {
        $('#if-cart-empty').show();
    }
}

如何显示显示的div：如果购物车没有商品，则为none？

-------编辑-------（适用于jsFiddle，但不适用于现场）

FORGOT链接到测试站点：

2 个答案:

更新答案