循环进度条-箭头类型

Question

我有一个进度条，我想在结尾或开始之前循环播放，带有下一个和上一个链接。我不知道如何更改我的实际javascript：

jQuery( document ).ready(function() {

  var back =jQuery(".js-prev");
  var   next = jQuery(".js-next");
  var   steps = jQuery(".step");

  next.bind("click", function() { 
    jQuery.each( steps, function( i ) {
      if (!jQuery(steps[i]).hasClass('current') &&     !jQuery(steps[i]).hasClass('done')) {
        jQuery(steps[i]).addClass('current');
        jQuery(steps[i - 1]).removeClass('current').addClass('done');
    return false;
      }
    })      
  });
  back.bind("click", function() { 
    jQuery.each( steps, function( i ) {
      if (jQuery(steps[i]).hasClass('done') && jQuery(steps[i + 1]).hasClass('current')) {
        jQuery(steps[i + 1]).removeClass('current');
        jQuery(steps[i]).removeClass('done').addClass('current');
        return false;
      }
    })      
  });

})

我尝试学习javascript，但是实际上我真的很糟糕……这段代码是由Grygorii Polinovskyi制作的： https://codepen.io/polinovskyi/pen/embZmw

感谢您的帮助：）

Answer 1

需要更改当前步骤索引。在这种情况下， done 类也没有意义–试试：

jQuery(document).ready(function() {

  var back = jQuery(".prev");
  var next = jQuery(".next");
  var steps = jQuery(".step");

  next.bind("click", function() {
    jQuery.each(steps, function(i) {
      if (jQuery(steps[i]).hasClass('current')) {
        jQuery(steps[i]).removeClass('current');        
        jQuery(steps[i + 1 > steps.length - 1 ? 0 : i + 1]).addClass('current');
        return false;
      }
    })
  });

  back.bind("click", function() {
    jQuery.each(steps, function(i) {
      if (jQuery(steps[i]).hasClass('current')) {
        jQuery(steps[i]).removeClass('current');        
        jQuery(steps[i - 1 < 0 ? steps.length - 1 : i - 1]).addClass('current');
        return false;
      }
    })
  });
})

.clearfix:after {
     clear: both;
     content: "";
     display: block;
     height: 0;
}
 .container {
     font-family: 'Lato', sans-serif;
     width: 1000px;
     margin: 0 auto;
}
 .wrapper {
     display: table-cell;
     height: 400px;
     vertical-align: middle;
}
 .nav {
     margin-top: 40px;
}
 .pull-right {
     float: right;
}
 a, a:active {
     color: #333;
     text-decoration: none;
}
 a:hover {
     color: #999;
}
/* Breadcrups CSS */
 .arrow-steps .step {
     font-size: 14px;
     text-align: center;
     color: #666;
     cursor: default;
     margin: 0 3px;
     padding: 10px 10px 10px 30px;
     min-width: 180px;
     float: left;
     position: relative;
     background-color: #d9e3f7;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     transition: background-color 0.2s ease;
}
 .arrow-steps .step:after, .arrow-steps .step:before {
     content: " ";
     position: absolute;
     top: 0;
     right: -17px;
     width: 0;
     height: 0;
     border-top: 19px solid transparent;
     border-bottom: 17px solid transparent;
     border-left: 17px solid #d9e3f7;
     z-index: 2;
     transition: border-color 0.2s ease;
}
 .arrow-steps .step:before {
     right: auto;
     left: 0;
     border-left: 17px solid #fff;
     z-index: 0;
}
 .arrow-steps .step:first-child:before {
     border: none;
}
 .arrow-steps .step:first-child {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
}
 .arrow-steps .step span {
     position: relative;
}
 .arrow-steps .step span:before {
     opacity: 0;
     content: "✔";
     position: absolute;
     top: -2px;
     left: -20px;
}
 .arrow-steps .step.done span:before {
     opacity: 1;
     -webkit-transition: opacity 0.3s ease 0.5s;
     -moz-transition: opacity 0.3s ease 0.5s;
     -ms-transition: opacity 0.3s ease 0.5s;
     transition: opacity 0.3s ease 0.5s;
}
 .arrow-steps .step.current {
     color: #fff;
     background-color: #23468c;
}
 .arrow-steps .step.current:after {
     border-left: 17px solid #23468c;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
	<div class="wrapper">
		<div class="arrow-steps clearfix">
			<div class="step current"> <span> Step 1</span> </div>
			<div class="step"> <span>Step 2 some words</span> </div>
			<div class="step"> <span> Step 3</span> </div>
			<div class="step"> <span>Step 4</span> </div>
		</div>
		<div class="nav clearfix">
			<a href="#" class="prev">Previous</a>
			<a href="#" class="next pull-right">Next</a>
		</div>
	</div>
</div>