我正在尝试这样做:
如果我的购物车是空的,那么另一个 div 会显示在它的顶部。所以你看不到购物车,但看到一个 div 说“你的购物车是空的”
我将另一个 div 设置为 display:none 在我的 css 中,但它始终显示!我正在尝试使用 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();
}
}
任何人都可以帮助我让它工作吗? 谢谢
最佳答案
通常,在这种情况下,当您声明 display: none;
时,会发生什么情况?在 CSS 规则中,然后使用 jQuery 来 .hide()
或 .show()
<div>
, 它在第一次尝试中不起作用。我的建议是您可以通过两种方式使用它:
- 通过定义类
class="hide"
然后切换类。即.toggleClass("hide")
. - 通过隐藏
div
使用.hide()
$(document).ready();
上的方法.
这是 jQuery/JavaScript 的错误/功能。所以这是最好的处理方式。如果没有 display: none
在style
元素的属性,jQuery 只是将其视为可见。我可以给你看一个 fiddle 来演示它。
fiddle :http://jsfiddle.net/praveenscience/r8y6E/
关于javascript - 显示无不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19593887/