Question

我仍然试图在jQuery中获得next()函数。我创建了一个悬停功能，当您将鼠标悬停在图像上时，每个图像都会出现一个透明叠加层

由于某种原因我的next()无效，我假设我的jQuery设置不正确。下面是我的代码片段：

$(document).ready(function () {
    var $this = $(this);
    $('.dummy').removeClass('overlay2');
    $this.parent().next('.dummy').addClass('overlay2');
});
});

有人可以纠正我出错的地方吗？

Answer 1

这可以在不使用任何javascript的情况下轻松完成：

.dummy {
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    background: #000;
    opacity: 0.50;
    display: none;
}

.figure-item:hover .dummy{
    display: block;
}

我刚刚在您的样式表中将.overlay2更改为.dummy并添加了display: none;，然后将其悬停在.figure-item集.dummy上display: block; }。

这里有效：http://jsfiddle.net/zaX5U/6/

旧的JS解决方案：

这应该适合你：

$(document).ready(function () {
    $('.figure-img').on('mouseenter mouseleave', function(e){
        var $this = $(this),
            toggle = e.type === 'mouseenter';
        $('.dummy').removeClass('overlay2');
        $this.find('.dummy').toggleClass('overlay2', toggle);
    });
});

您之前的代码无效的原因是因为您似乎忘记了包含事件处理程序的行（小提琴中有一个无法匹配的}):）。这意味着$(this)实际上是document，因此代码无效。

.hover()通常会映射到.on( "mouseenter mouseleave"，在这种情况下，它会使代码更小以使用完整版本。这也使用带有可选switch参数的.toggleClass()函数来移除或添加类，具体取决于事件的类型。

小提琴：http://jsfiddle.net/zaX5U/4/

Jquery next（）函数没有返回类

1 个答案: