0

我正在尝试这样做：

如果我的购物车是空的，那么另一个 div 会显示在它的顶部。所以你看不到购物车，但看到一个 div 说“你的购物车是空的”

我在我的css中将另一个div设置为display：none，但它总是显示！我试图使用 javascript 来隐藏或显示它。我使用的购物车是 simplecart js。

这是我的购物车和购物车空 div 的 CSS

.cart{
margin: 30px 0 0 0;
background:red;
position:relative;
}
#if-cart-empty{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
display: none;
background:w

这是html

<div class="cart">',
<div class="simpleCart_items"></div>',
<span class="simpleCart_quantity"></span> items - <span class="simpleCart_total"></span>',
<div class="checkout">',
<a href="javascript:;" class="simpleCart_checkout">Checkout</a>',
</div>',
<a href="javascript:;" class="simpleCart_empty">Empty Basket</a>',
<div id="if-cart-empty" style="display: none">Your cart is empty.</div>',
</div>',

这是js

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

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

任何人都可以帮我解决这个问题吗？谢谢

4

1 回答 1

2

通常，在这种情况下，发生的情况是，当您display: none;在 CSS 规则中声明，然后使用 jQuery to.hide()或.show()时<div>，它在第一次尝试时不起作用。我的建议是您可以通过两种方式使用它：

  1. 通过定义一个类class="hide"，然后切换类。即，.toggleClass("hide")。
  2. By hiding the div using .hide() method on $(document).ready();.

This is a bug / feature of jQuery / JavaScript. So this is the best way to deal it. If there's no display: none in the style attribute of a element, jQuery simply treats it as visible. I can show you a fiddle demonstrating it.

Fiddle: http://jsfiddle.net/praveenscience/r8y6E/

于 2013-10-25T15:33:22.200 回答