为什么会出现重复跳转？ #

你遇到的这个“点击Next跳两步甚至更多”的问题，核心原因是每次打开弹窗时，你都给.previous、.next、.close按钮重复绑定了点击事件。第一次打开弹窗绑定1次，关闭再打开又绑定1次，次数叠加后，点击一次按钮就会执行多次跳转逻辑，自然就会跳多步啦。

你用$('body').one({mouseenter: ...})初始化slide的ID是没问题的，但里面的按钮事件绑定逻辑，每次点击幻灯片打开弹窗都会重复执行，这才是罪魁祸首。

修复后的完整代码 #

我帮你重构了代码，把重复绑定的问题解决了，同时优化了逻辑结构：

JavaScript部分

$('body').one({mouseenter: function () { 
    // 给每个slide添加对应ID的类名
    $('.slide .showDetail').each(function() { 
        const slideId = $(this).attr('id'); 
        $(this).closest('.slide').addClass(slideId); 
    }); 

    // 封装更新上一张/下一张状态的函数，返回对应的ID
    const updateNavStatus = function(){
        const prevId = $('.activeSlide').prev('.slide').find('.showDetail').attr('id');
        $('.previous').toggle(prevId !== null); // 自动显示/隐藏按钮
        
        const nextId = $('.activeSlide').next('.slide').find('.showDetail').attr('id');
        $('.next').toggle(nextId !== null);
        
        return { prevId, nextId };
    }

    // 幻灯片点击：打开详情弹窗
    $('.slide .showDetail').click(function() { 
        $('.slideButtons').show(); 
        const currentId = $(this).attr('id'); 
        
        // 先清除之前的激活状态，避免残留
        $('.activeSlide').removeClass('activeSlide');
        $('.activeDetail').removeClass('activeDetail').hide();
        
        // 设置当前激活的幻灯片和详情
        $(this).closest('.slide').addClass('activeSlide'); 
        $(`.slideDetail.detail${currentId}`).show().addClass('activeDetail'); 
        
        // 更新导航按钮的显示状态
        updateNavStatus();
    }); 

    // 上一张按钮逻辑（只绑定一次）
    $('.previous').click(function() { 
        const { prevId } = updateNavStatus();
        if (!prevId) return; // 没有上一张就不执行
        
        // 切换激活状态
        $('.activeDetail').removeClass('activeDetail').hide();
        $('.activeSlide').removeClass('activeSlide');
        
        $(`.slideDetail.detail${prevId}`).addClass('activeDetail').show();
        $(`.slide.${prevId}`).addClass('activeSlide');
        
        updateNavStatus();
    }); 

    // 下一张按钮逻辑（只绑定一次）
    $('.next').click(function() { 
        const { nextId } = updateNavStatus();
        if (!nextId) return; // 没有下一张就不执行
        
        // 切换激活状态
        $('.activeDetail').removeClass('activeDetail').hide();
        $('.activeSlide').removeClass('activeSlide');
        
        $(`.slideDetail.detail${nextId}`).addClass('activeDetail').show();
        $(`.slide.${nextId}`).addClass('activeSlide');
        
        updateNavStatus();
    }); 

    // 关闭弹窗逻辑（只绑定一次）
    $('.close').click(function() { 
        $('.slideButtons').hide(); 
        $('.activeDetail').removeClass('activeDetail').hide(); 
        $('.activeSlide').removeClass('activeSlide'); 
    }); 
}}, ".slider");

CSS和HTML部分可以保持你原来的不变，不需要修改

关键优化点说明 #

1. 把按钮事件移到外层：不再每次打开弹窗都重复绑定按钮事件，而是只在初始化时绑定一次，彻底解决重复触发的问题。
2. 封装导航更新函数：把原来的prevNextUpdate改成updateNavStatus，提取重复逻辑，还能返回需要的ID，减少全局变量的使用。
3. 添加状态校验：点击上/下一张时先检查是否存在对应的幻灯片，避免无效操作。
4. 重置激活状态：每次打开弹窗时先清除之前的激活类，防止状态残留导致的异常。

小建议 #

如果你的Slick Slider会动态生成幻灯片（比如异步加载），可以把幻灯片的点击事件改成事件委托的形式，这样新增的幻灯片也能触发弹窗：

// 替换原来的$('.slide .showDetail').click(...)
$(document).on('click', '.slide .showDetail', function() {
    // 里面的逻辑和之前一样
});

内容的提问来源于stack exchange，提问作者JustinChev