4

遵循以下代码的逻辑：

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

忘记放置测试站点的链接：

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

2 回答 2

3

像这样的东西会起作用：

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();
    });
});
于 2013-07-12T03:04:10.817 回答
3

更新答案

演示http://jsfiddle.net/yyene/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();
    }
}
于 2013-07-12T03:24:03.643 回答