Question

我遇到了jQuery .not（）无法正常工作的问题。

我有一个包含3种产品的定价表，当你鼠标悬停在每个产品上时，描述会出现，然后在鼠标输出时消失，到目前为止一切正常。

问题是，在页面加载时，三个产品中的一个（每个产品都保存在<aside>中）将应用.selected类，我需要使用mouseenter / leave函数才能运行在<aside>上。

唯一需要注意的是，点击每个<button>'s中的<aside>中的任意一个，都会从当前.selected中移除<aside>类并应用于<button>'s <aside> parent（我没有为此包含JQ，因为它只是一个简单的.addClass）。

我目前所拥有的代码示例如下，感谢先进。

的jQuery

$(".pricing3 aside").not('.selected').mouseenter(function() {
$(".desc", this).stop().slideDown('slow');
})
.mouseleave(function() {
$(".desc", this).stop().slideUp('slow');
});

HTML

<div class="pricing3">
  <aside>
    <i class="fa fa-clock-o"></i>
    <h3>1 Hour Pass</h3>
    <p class="desc">Description</p>
    <p class="pricing">£XX</p>
    <button type="submit">BUY NOW</button>
  </aside>
  <aside class="selected">
    <i class="fa fa-clock-o"></i>
    <h3>8 Hour Pass</h3>
    <p class="desc">Description</p>
    <p class="pricing">£XX</p>
    <button type="submit">BUY NOW</button>
  </aside>
  <aside>
    <i class="fa fa-clock-o"></i>
    <h3>24-7-365 Access</h3>
    <p class="desc">Description</p>
    <p class="pricing">£XX</p>
    <button type="submit">BUY NOW</button>
  </aside>
</div>

Answer 1

需要使用event delegation，因为目标元素选择基于动态状态

$(".pricing3").on('mouseenter', 'aside:not(.selected)', function () {
    $(".desc", this).stop().slideDown('slow');
}).on('mouseleave', 'aside:not(.selected)', function () {
    $(".desc", this).stop().slideUp('slow');
});

它的写法可能略有不同

$(".pricing3").on({
    mouseenter: function () {
        $(".desc", this).stop().slideDown('slow');
    },
    mouseleave: function () {
        $(".desc", this).stop().slideUp('slow');
    }
}, 'aside:not(.selected)')

Answer 2

随着课程的转变，你最好在事件处理程序中检查课程

$(".pricing3 aside").on('mouseenter mouseleave', function() {
    if ( !$(this).hasClass('selected') ) {
        $(".desc", this).stop().slideToggle('slow');
    }
});

Answer 3

如果我理解正确，问题是您希望移除.selected，然后mouseenter()就可以在.selected上运行，就好像它没有on()一样在它上面？

如果是这种情况，你应该将你的事件处理程序附加到DOM树的更高位置，然后使用<aside>过滤到{{1}} s这样你可以翻转/翻转你的所有类想要，事件处理程序将按预期工作。在编码时，您只在页面加载时应用过滤器，因此类的状态更改不起作用。

jQuery。不能正常运行

3 个答案: