jquery - 如何显示显示:none if shopping cart is empty of items?的div

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-购物车为空?

-------- 编辑 -------- (在 jsFiddle 中工作但不在现场)

这是我在我网站上的帖子中放入的确切代码。我在 .itemremove 上添加了一个额外的 .click 事件，因此您可以单击“删除”容器并对其进行测试:

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

忘了放一个测试站点的链接:

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

更新答案

演示 http://jsfiddle.net/yeyene/BAs2m/8/

移除item后，需要再次检查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();
    }
}