Question

我目前正在开发一个网站，当您点击项目图像时，会弹出一个全屏覆盖图，其中包含有关项目和其他图像的信息。我也希望下一个和前一个按钮循环执行项目。我已经使下一个按钮工作，但它只进入下一个项目一次。如果我再次点击它，没有任何反应。

我正在处理的网站是here，我已经制作了一个JSBin来展示我的HTML结构以及我的JQuery的样本。

有谁可以请一看，帮我弄清楚我哪里出错？

Answer 1

最简单的方法是将您最近的项目与其他项目分开，并将next和prev函数分别用于这两个项目。

这是您在上一次和下一次按钮点击时显示其他项目的方法。我注意到你的文字在悬停时消失了。可能想调整一下！

 $('.prev-button').click(function() {
    $('.additional-project').hide();
    var previous = $(this).closest('.additional-project').prevAll('.additional-project').eq(0);
    if (previous.length === 0) previous = $(this).closest('.additional-project').nextAll('.additional-project').last();
    previous.show();
});

$('.next-button').click(function() {
    $('.additional-project').hide();
    var next = $(this).closest('.additional-project').nextAll('.additional-project').eq(0);
    if (next.length === 0) next = $(this).closest('.additional-project').prevAll('.additional-project').last();
    next.show();
});

使用JQuery的下一个和上一个按钮

1 个答案: