如何点击按钮获取data-id并传入splide.go()实现轮播跳转

核心问题原因 #

你遇到的问题是循环绑定事件时的作用域问题：用var声明循环变量会导致所有事件回调共享同一个变量，最终取到的是循环结束后的固定值；或者没有正确从当前点击的元素上获取data-id（比如误操作了循环变量对应的元素，而非点击的元素）。

修复方案 #

方案1：使用forEach遍历绑定（推荐） #

forEach的回调函数会为每个按钮创建独立作用域，确保能正确获取当前按钮的data-id：

// 获取所有目标按钮
const navButtons = document.querySelectorAll('button.primary[data-id]');

navButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 从当前点击的按钮获取data-id，转为数字
    const targetSlide = parseInt(this.dataset.id, 10);
    // 注意：Splide的slide索引是从0开始的，如果你的data-id是从1开始，需要减1
    splide.go(targetSlide - 1);
    console.log('跳转至slide索引:', targetSlide - 1);
  });
});

方案2：事件委托（更适合动态生成的元素） #

如果按钮是动态渲染的（Hubl循环生成的静态元素也适用），给父容器绑定事件可以避免重复绑定，更高效：

// 替换成按钮的实际父容器选择器
document.querySelector('.carousel-button-group').addEventListener('click', function(e) {
  // 找到点击的目标按钮
  const clickedBtn = e.target.closest('button.primary[data-id]');
  if (!clickedBtn) return; // 不是目标按钮则退出

  const targetSlide = parseInt(clickedBtn.dataset.id, 10);
  splide.go(targetSlide - 1);
  console.log('跳转至slide索引:', targetSlide - 1);
});

方案3：修复传统for循环 #

如果一定要用for循环，把var改成let（let会创建块级作用域，每个循环迭代都有独立变量）：

const navButtons = document.querySelectorAll('button.primary[data-id]');
for (let i = 0; i < navButtons.length; i++) {
  navButtons[i].addEventListener('click', function() {
    const targetSlide = parseInt(navButtons[i].dataset.id, 10);
    splide.go(targetSlide - 1);
    console.log('跳转至slide索引:', targetSlide - 1);
  });
}

关键注意点 #

• Splide的go()方法接受0-based的索引，如果你的data-id是从1开始编号的（比如1对应第一个轮播图），必须减去1才能正确跳转。
• 用parseInt(this.dataset.id, 10)确保把字符串类型的data-id转为数字，避免Splide解析错误。

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