1

我的困境是关于 .live() 和 .hover()。我想要的是，每次我点击“立即购买”按钮时，它都会更新我的侧边栏（更新它不会加载页面），其中包含购买该商品的数量，以及当我悬停购物车时侧边栏上的图像，它将向我显示完整的购买详细信息（我隐藏了，因为我希望它只在悬停时显示）。但是在我点击“购买按钮”后，看到购买的更新，我试图将鼠标悬停在侧边栏上，但遗憾的是它没有显示完整的详细信息，然后在我刷新页面后悬停正常工作。一位朋友告诉我使用 .live() 但发现它对我来说很复杂，因为我还是个新手。谁能指导我？:(

代码：

$('#shoppingCart').hover(
    function(){
        //div
        $('#div_widget').removeClass('hidden');
        $('.cartDivLight').addClass('cartDivDark');

    },
    function(){
        //div
        $('#div_widget').addClass('hidden');
        $('.cartDivLight').removeClass('cartDivDark');
    }
);

，这就是我的脚本的样子，我想集成 .live()，但它不起作用。:(

4

2 回答 2

3

你不需要使用live()和hover()组合。事实上，从 jQuery1.7 开始，您应该改用 jQuery 方法on()，而不是使用live()已弃用的方法（即，从未来的 jQuery 版本中删除）。http://api.jquery.com/on/

live(), delegate(),方法的基本优点 是您可以使用它们来执行事件：悬停、单击等，在您稍后通过 AJAX、JavaScript 的方法等on()添加该元素之前尚不存在的元素上。createElement

以下是使用方法on()：

$('#container').on('hover', '#clickableElement', function({ console.log('do something'); });

#container是#clickableElement驻留或最终驻留的元素。您也可以document.body改用，但会#container缩小焦点，因此 jQuery 不必搜索太多即可找到#container选择器。

这是一个帮助您入门的 jsfiddle：http: //jsfiddle.net/trpeters1/WrXVu/44/

鼠标悬停行为有点搞砸了，但你会明白的，

于 2012-05-04T00:11:58.000 回答
2

假设您的侧边栏结构如下：

<div id="sidebar">
    <div class="shoppingCart">
        <div class="static">
            //icon & title
        </div>
        <div class="purchase_details">
            ...
        </div>
    </div>
    <div class="shoppingCart">
        <div class="static">
            //icon & title
        </div>
        <div class="purchase_details">
            ...
        </div>
    </div>
</div>

那么相应的javascript将是：

$('#sidebar').on('mouseenter', '.shoppingCart', function() {
        var $this = $(this);
        $this.find('.static').addClass('cartDivDark');
        $this.find('.purchase_details').show();
    }).on('mouseleave', '.shoppingCart', function() {
        $this.find('.static').removeClass('cartDivDark');
        $this.find('.purchase_details').hide();
    }
);

这不会 100% 正确，因为我看不到您的 HTML，但它应该展示必要的原则。

笔记：

  • .on()取代.live()，.delegate()并.bind()从 jQuery 1.7.1 开始。
  • 我们用于.on()将事件处理委托给侧边栏，代表当前和未来的购物车。
  • 您不能使用 委托悬停.on('hover' ...)，但可以委托悬停的两个组件事件mouseenter和mouseleave。
  • 侧边栏中的所有内容都由类标识，而不是 id。这允许我们编写通用的 mouseenter 和 mouseleave 处理程序，它们对悬停元素内的元素进行操作。
于 2012-05-04T00:40:03.083 回答