JQuery点击按钮无法增减Carousel元素position属性值的问题求助

最常见原因：事件绑定时机不对 #

你在控制台能正常执行代码，是因为控制台执行时页面DOM已经完全加载，能找到目标元素；但如果你的事件绑定代码在#forward、#backward、.story这些DOM元素还没渲染完成就运行了，会导致找不到元素，绑定自然失效。

解决办法：确保DOM加载完成后再绑定事件 #

把代码包裹在DOMContentLoaded事件回调里，或者直接把脚本放在页面底部（</body>标签前）：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮和所有轮播卡片
  const forwardBtn = document.getElementById('forward');
  const backwardBtn = document.getElementById('backward');
  const storyItems = document.querySelectorAll('.story');

  // 前进按钮点击事件
  forwardBtn.addEventListener('click', function() {
    storyItems.forEach(item => {
      // 读取当前position值，注意转成数字类型
      let currentPos = parseInt(item.getAttribute('position'));
      // 更新属性值
      item.setAttribute('position', currentPos + 1);
    });
  });

  // 后退按钮点击事件
  backwardBtn.addEventListener('click', function() {
    storyItems.forEach(item => {
      let currentPos = parseInt(item.getAttribute('position'));
      item.setAttribute('position', currentPos - 1);
    });
  });
});

其他可能的原因及解决 #

1. 元素是动态生成的
   如果#forward、#backward或者.story是通过JS动态添加到页面的，直接绑定事件会失效，需要用事件委托：

document.addEventListener('DOMContentLoaded', function() {
  // 把事件绑定到父元素（比如body，或者更接近的父容器）
  document.body.addEventListener('click', function(e) {
    const storyItems = document.querySelectorAll('.story');
    // 判断点击的目标是否是前进按钮
    if (e.target.id === 'forward') {
      storyItems.forEach(item => {
        let currentPos = parseInt(item.getAttribute('position'));
        item.setAttribute('position', currentPos + 1);
      });
    }
    // 判断点击的目标是否是后退按钮
    else if (e.target.id === 'backward') {
      storyItems.forEach(item => {
        let currentPos = parseInt(item.getAttribute('position'));
        item.setAttribute('position', currentPos - 1);
      });
    }
  });
});

2. 存在重复ID
   检查页面中是否有多个id="forward"或id="backward"的元素，getElementById只会获取第一个匹配的元素，其他按钮的点击自然不会触发事件。确保每个ID唯一即可。

3. 属性值类型问题
   如果position属性值不是纯数字，parseInt会返回NaN，导致更新失败。可以添加默认值处理：

let currentPos = parseInt(item.getAttribute('position')) || 0;

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