JavaScript实现步骤进度条时第3步无法切换颜色如何解决

问题根因 #

• CSS样式选择器书写错误：原代码写的是标签选择器step，但HTML中步骤节点使用的是类名step，缺少类选择器前缀.，导致默认样式未生效
• 进度切换逻辑未做分支判断：原定时遍历步骤的函数中，给所有激活步骤统一设置了绿色，没有针对第3步单独配置颜色规则

修复代码 #

CSS部分 #

.step {
  min-height: 20px;
  margin-right: 2px;
  border-radius: 14px;
  background-color: #a9b7b9;
}

JavaScript部分 #

仅需要修改原有steps函数的颜色赋值逻辑，其余交互逻辑保持不变：

$(document).ready(function() {
  var i = 1;
  var id = setInterval(steps, 700);

  function steps() {
    if (i == 4) {
      clearInterval(id);
    } else {
      // 第3步单独设置红色，其余激活步骤保持绿色
      if (i === 3) {
        $(".step" + i).css('background-color', 'rgb(220, 53, 69)');
      } else {
        $(".step" + i).css('background-color', 'rgb(134, 209, 109)');
      }
      i++;
    }
  }

  // 其余原有按钮点击逻辑保持不变
  $(".btn-next").on("click", function() {
    $('.page-1').fadeOut(1000, function() {
      $('.page-2').fadeIn(1000);
    });

    var interval = setInterval(slide, 1200)
    d = 1;

    function slide() {
      if (d == 6) {
        clearInterval(interval);
        $('.btn-next-two').fadeIn();
        $('.search').fadeOut();
      } else {
        $(".ship-" + d).addClass('slide-in-left');
        $(".ship-" + d).css('display', 'block');
        d++;
      }
    }
  });
  $(".btn-next-two").on("click", function() {
    $('.page-2').fadeOut(1000, function() {
      $('.page-3').fadeIn(1000);
    });
  });
  $('.btn-delivery').on('click', function() {
    $('.page-3').fadeOut(1000, function() {
      $('.page-4').fadeIn(1000);
    });
  });
  $('.btn-time').on('click', function() {
    $('.page-4').fadeOut(1000, function() {
      $('.page-5').fadeIn(1000);
    });
  });
});

HTML部分 #

原有HTML结构无需修改，注意提前引入jQuery依赖即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-2 col-sm-1  offset-2 offset-sm-4 step1 step"></div>
<div class="col-2 col-sm-1  step2 step"></div>
<div class="col-2 col-sm-1  step3 step"></div>
<div class="col-2 col-sm-1  step4 step"></div>

效果说明 #

• 进度自动播放时，第1、2步激活后显示绿色
• 进度走到第3步时，该步骤显示红色
• 未激活的步骤始终保持默认灰色，符合预期效果

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