如何简化多段if语句？实现循环至20的translateX样式变换

嘿，这堆重复的条件判断完全可以用数学计算来替代，不用写一堆冗余的if！让我们把逻辑提炼一下：

你会发现每个区间都是4个连续的i值（0-3、4-7、8-11…），对应的translateX偏移量每次增加-92vw（我猜你之前写的vh是笔误，毕竟是水平偏移，用vw更合理，如果确实是垂直偏移的话换成vh就行）。

简化后的核心代码 #

// 按每4个i为一组计算偏移量
const groupIndex = Math.floor(i / 4);
const offset = groupIndex * -92;

// 应用样式到时间线进度条
$('.timeline__bar').css({
  transform: `translateX(${offset}vw)`
});

逻辑拆解 #

• Math.floor(i / 4)会自动把i按4个一组划分：
  • 当i在0-3之间时，结果为0 → 偏移0vw
  • 当i在4-7之间时，结果为1 → 偏移-92vw
  • 当i在8-11之间时，结果为2 → 偏移-184vw
  • …以此类推，直到i=20时，结果为5 → 偏移-460vw，完美覆盖你要的“持续循环至数值约20”的场景

可选的严谨性优化 #

如果需要确保只处理i在0到20之间的情况，可以加个范围判断：

if (i >= 0 && i <= 20) {
  const groupIndex = Math.floor(i / 4);
  const offset = groupIndex * -92;
  $('.timeline__bar').css({
    transform: `translateX(${offset}vw)`
  });
}

这样不管i怎么变化，都能自动计算出对应的偏移量，再也不用写一堆重复的if语句啦！

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