Question

我正在制作一个图像库，它正在做一些非常奇怪的事情，我不太明白。当我点击我想要的“下一张图像”或“上一张图像”按钮的按钮时，按钮就会消失，而不是显示下一张/上一张图像。

按钮功能如下所示：

var nextbutton= $('.next');
var prevbutton= $('.prev');

nextbutton.click(function(){
    $(this).parent(images).hide(0).next().show(0);
    return false;
});

prevbutton.click(function(){
    $(this).parent(images).hide(0).prev().show(0);
    return false;
});

哪个工作正常然后我决定添加另一个功能，一个让你点击你当前正在查看的图像，然后它将具有与“下一个图像”按钮相同的功能，带你到下一个图像。很简单，我想，只是复制我用于按钮的“下一个图像”功能，但使用不同的选择器：

var imagebutton= $('#imagecontainer img:not(:last)');

imagebutton.click(function(){
    $(this).parent(images).hide(0).next().show(0);
    return false;
});

它完成了应有的操作，单击图像并显示下一个图像。但是，现在下一个/上一个按钮在单击时消失，它们不会将您带到下一个/上一张图像。很奇怪！

我是否忽视了一些明显的东西？我是JQuery的新手所以非常感谢任何帮助！

Answer 1

虽然我不确定消失下一个按钮的原因是什么，但请尝试使用此代码进行绑定：

$(".next, #imagecontainer img:not(:last)").on("click", function(e){
    $(this).closest("div").hide().next().show();
    e.preventDefault();
});

$(".prev").on("click", function(e){
    $(this).closest("div").hide().prev().show();
    e.preventDefault();
});

使用您的网页在控制台中播放说它可以正常工作。

点击时JQuery按钮消失，而不是激活其预期功能

1 个答案: