Question

我使用的插件允许为图像添加弹出窗口，我希望当我点击弹出窗口时，我可以在所有弹出窗口中使用上一个和下一个按钮进行导航。

以下是我的元素：

<div class="imp-tooltip.imp-tooltip-visible" style="border-radius: 5px; padding: 20px; background: rgba(0, 0, 0, 0.9)"></div>

我试过这个：

<nav>
    <button id="down" ></button>
    <button id="up" ></button>
</nav>


var $currentElement = $(".imp-tooltip imp-tooltip-visible").first();

$("#down").click(function () {
    var $nextElement = $currentElement.next('.imp-tooltip');
    if($nextElement.length) {

        $currentElement = $nextElement;
        $('html, body').stop(true).animate({
            scrollTop: $nextElement.offset().top
        }, 1000);
    }
    return false;
});

$("#up").click(function () {
    var $prevElement = $currentElement.prev('.imp-tooltip');
    if($prevElement.length) {
        $currentElement = $prevElement;
        $('html, body').stop(true).animate({
            scrollTop: $prevElement.offset().top
        }, 1000);
    }
    return false;  
});

Answer 1

您的代码中存在一些小错误。

HTML：class="imp-tooltip.imp-tooltip-visible"
应该是：class="imp-tooltip imp-tooltip-visible"

JS：$(".imp-tooltip imp-tooltip-visible").first()
应该是：$(".imp-tooltip-visible").first()

imp-tooltip-visible班的目的是什么？是否表示当前的活动元素是什么？如果是这样，那么在为其分配新元素之前，您忘记从$currentElement中删除此类。执行此操作后，应将此类添加到新$currentElement。这也会使选择器中的.first()部分变得多余，因为只有一个元素具有此类另一方面，如果此类指示哪些imp-tooltip div实际上是可见的，那么next()和prev()函数应该定位imp-tooltip-visible而不是imp-tooltip。

在jquery中使用相同类名的div之间导航

1 个答案: