2

我使用 jquery 1.3.2。我尝试将简单的 jquery 编写到我网站上实现的 ajax 购物车中。有一些功能ajaxCartOpenCart()- 打开购物车块（只需取消隐藏它）和ajaxCartCloseCart().

我添加了简单的代码，在添加到购物车后，取消隐藏购物车块，等待 4 秒并关闭购物车块。

ajaxCartOpenCart();
setTimeout(function() {
  ajaxCartCloseCart()
}, 4000);

问题：我需要创建一个条件，说明 - 如果在 4 秒的这段时间内。鼠标进入#cart-block，然后不要关闭它，等到鼠标离开。否则计数 4 秒并关闭购物车。

非常感谢您的帮助。

4

3 回答 3

3

您可以清除超时，然后在鼠标离开时调用 ajax 函数。就像是：

var t = setTimeout(function () {
   // ...
}, 4000);

$('element').hover(function () {
  clearTimeout(t);
}, function () {
  ajaxCartCloseCart();
});
于 2012-11-29T01:57:04.597 回答
1

我创建了类似的东西setInterval来显示和隐藏顶栏

在这里演示 jsfiddle：http: //jsfiddle.net/frictionless/QmLAv/

$(function() {

   var showTime = 5000;
   var transition = 'slow';
   var target = $('.headerbar');
   var flag = false;

    target.slideDown(transition);
    var id = setInterval(function(){hide(target);}, showTime);

    var hide = function(item) {
        debugger;
        if(flag){
            return;
        }
        clearInterval(id);
        item.slideUp(transition);
    };

    target.hover(function() {
        flag = true;
        clearInterval(id);
        $(this).show();
    }, function() {
        flag = false;
        id = setInterval(function(){hide(target);}, showTime);
    });

});​
于 2012-11-29T02:03:39.923 回答
0

您可以使用 css 来控制隐藏/显示购物车，如下所示。我认为这是最简单的方法，因为你不需要关心 setTimeout 和 setInterval，这可能会导致意想不到的结果。

<style type="text/css">
    .shopCart .shopCartDetail
    {
        border: 1px solid;
        width: 100px;
        display: none;
    }
    .shopCart:hover .shopCartDetail
    {
        display: block;
    }
</style>
<div class="shopCart">
    Shop Cart
    <div class="shopCartDetail">
        This is Shop Cart Detail</div>
</div>
<script type="text/javascript">
    $('.shopCart').hover(function () {
        //Ajax update content
    });
</script>
于 2012-11-29T02:54:46.690 回答