使用jQuery实现列表项position属性循环切换的问题求助

问题根源 #

• 原代码中$('li').attr('position')仅返回第一个li元素的position属性值，导致判断逻辑只针对第一个li生效，其余4个li的属性值无法被正确更新。
• 条件判断写法繁琐，且未确保每个li都被单独处理。

修正后的代码 #

// 前进按钮点击事件
$("#forward").click(function() {
  $('li').attr('position', function(_, currentVal) {
    const num = Number(currentVal);
    // 循环前进：5→1，其余数值+1
    return num === 5 ? 1 : num + 1;
  });
});

// 后退按钮点击事件
$("#backward").click(function() {
  $('li').attr('position', function(_, currentVal) {
    const num = Number(currentVal);
    // 循环后退：1→5，其余数值-1
    return num === 1 ? 5 : num - 1;
  });
});

代码说明 #

• 利用attr()的回调函数，对每个li元素单独处理其position属性，确保所有列表项都能被正确更新。
• 前进逻辑：当当前值为5时，点击后直接回到1；其他情况数值加1。
• 后退逻辑：当当前值为1时，点击后直接回到5；其他情况数值减1。
• 也可以用取模运算简化循环逻辑，比如前进可替换为(num % 5) + 1，后退可替换为(num - 2 + 5) % 5 + 1，两种方式效果一致，可根据可读性选择。

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