Javascript 显示无不工作
我正在尝试这样做: 如果我的购物车是空的,那么另一个div显示在它的顶部。所以你没有看到购物车,但看到一个div说“你的购物车是空的” 我将另一个div设置为display:在我的css中没有,但它总是显示的!我试图用javascript隐藏或显示它。我使用的购物车是simplecart js 这是我的购物车和购物车空div的cssJavascript 显示无不工作,javascript,css,Javascript,Css,我正在尝试这样做: 如果我的购物车是空的,那么另一个div显示在它的顶部。所以你没有看到购物车,但看到一个div说“你的购物车是空的” 我将另一个div设置为display:在我的css中没有,但它总是显示的!我试图用javascript隐藏或显示它。我使用的购物车是simplecart js 这是我的购物车和购物车空div的css .cart{ margin: 30px 0 0 0; background:red; position:relative; } #if-cart-empty{ po
.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>',
有人能帮我把这件事做好吗?
谢谢一般来说,在这种情况下,当您声明
display:none在CSS规则中选择code>,然后使用jQuery对.hide()
或.show()
执行
,在第一次尝试中它不起作用。我的建议是,您可以通过两种方式使用它:
通过定义一个类class=“hide”
,然后切换该类。i、 例如,.toggleClass(“隐藏”)
使用$(document.ready())上的.hide()
方法隐藏div
代码>
这是jQuery/JavaScript的一个bug/特性。所以这是最好的解决方法。如果元素的style
属性中没有display:none
,jQuery只将其视为可见。我可以给你看一把小提琴来演示它
Fiddle:通过浏览器开发工具检查样式,你学到了什么?它不工作还是div显示在neith下?问题是你在加载时调用checkCart。我确信这很好,但是它的item.legnth大于0。这就是你的问题所在。Console.log长度并查看它是什么。我认为您需要一种新的方法来检查是否存在项。这里是.itemRow.itemrove和.itemContainer?只需做一个小动作就可以了。这样的问题几乎不可能在看到代码的情况下解决
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();
}
}