如果购物车中没有商品，如何显示 div 是 display:none？

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？

------- EDIT ------- （在 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();
    }
}

Answer 2

这样的事情会起作用：

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