显示无效

时间:2013-10-25 15:28:11

标签: javascript css

我正在尝试这样做:

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

我的另一个div设置为display:none in my css,但它始终显示!我试图使用JavaScript来隐藏或显示它。我正在使用的购物车是simplecart js。

继承人我的css购物车和购物车空div

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

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

1 个答案:

答案 0 :(得分:2)

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

  1. 通过定义类class="hide"然后切换类。即,.toggleClass("hide")
  2. div上使用.hide()方法隐藏$(document).ready();
  3. 这是jQuery / JavaScript的错误/功能。所以这是处理它的最佳方式。如果元素的display: none属性中没有style,jQuery只会将其视为可见。我可以告诉你一个演示它的小提琴。

    小提琴:http://jsfiddle.net/praveenscience/r8y6E/