文章/答案/技术大牛

发布

社区首页 >问答首页 >使用JavaScript的step过程不会改变颜色

问使用JavaScript的step过程不会改变颜色
EN

Stack Overflow用户

提问于 2022-06-02 22:54:51

回答 2查看 58关注 0票数 2

我正在尝试使用JavaScript进行一个步骤处理。当它到达第三步时，它的颜色会改变到另一种颜色。我试了很多次，但没有成功。

描述步骤过程的工作原理

想象一下我希望它如何运作

$(document).ready(function() {
  var i = 1;

  var id = setInterval(steps, 700);

  function steps() {
    if (i == 4) {
      clearInterval(id);
    } 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);
    });
  });
});

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

<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">

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-06-02 23:14:01

您的javascript代码中有一个小问题。

我更新了函数步骤。

function steps(){
  if(i == 5){
    clearInterval(id);
  }
  else if(i == 3) {
    $(".step"+i).css('background-color','red');
    i++;
  }
  else{
    $(".step"+i).css('background-color','rgb(134 209 109)');
    i++;
  }
}

这是完整的代码。

$(document).ready(function(){
      var i = 1;

      var id = setInterval(steps,700);
      function steps(){
           if(i == 5){
               clearInterval(id);
           }
           else if(i == 3) {
               $(".step"+i).css('background-color','red');
               i++;
           }
           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);
          });});
      });

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

<!DOCTYPE html>
<html lang="en">
  <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <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">

  </body>
</html>

票数 -1

Stack Overflow用户

发布于 2022-06-02 23:28:27

刚把

else if(i == 3){
           $(".step"+i).css('background-color','red');
           i++;
       }

在这种情况下。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72483091

复制

相似问题

问使用JavaScript的step过程不会改变颜色
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript的step过程不会改变颜色EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript的step过程不会改变颜色
EN