在按钮类上回显

Question

我正在尝试构建一个多步选择器，在每张幻灯片中都有多个组合。例如，您有btn1，btn2和btn3。每个按钮都会在下一张幻灯片中显示其他内容。

这是页内多步滑块，因此我无法使用onClick，提交输入或类似内容。

正如您在下面的代码中看到的那样，我试图回显之前在幻灯片中单击过的按钮的名称或值。

var currentSlide = 0,
    $slideContainer = $('.slide-container'),
    $slide = $('.slide'),
    slideCount = $slide.length,
    animationTime = 300;

function setSlideDimensions () {
  var windowWidth = $(window).width();
  $slideContainer.width(windowWidth * slideCount);
  $slide.width(windowWidth);
}

function generatePagination () {
  var $pagination = $('.pagination');
  for(var i = 0; i < slideCount; i ++){
    var $indicator = $('<div>').addClass('indicator'),
        $progressBarContainer = $('<div>').addClass('progress-bar-container'),
        $progressBar = $('<div>').addClass('progress-bar'),
        indicatorTagText = $slide.eq(i).attr('data-tag'),
        $tag = $('<div>').addClass('tag').text(indicatorTagText);
    $indicator.append($tag);
    $progressBarContainer.append($progressBar);
    $pagination.append($indicator).append($progressBarContainer);
  }
  $pagination.find('.indicator').eq(0).addClass('active');
}

function goToNextSlide () {
  if(currentSlide >= slideCount - 1) return; 
  var windowWidth = $(window).width();
  currentSlide++;
  $slideContainer.animate({
    left: -(windowWidth * currentSlide)
  });
  setActiveIndicator();
  $('.progress-bar').eq(currentSlide - 1).animate({
    width: '100%'
  }, animationTime);
}

function goToPreviousSlide () {
  if(currentSlide <= 0) return; 
  var windowWidth = $(window).width();
  currentSlide--;
  $slideContainer.animate({
    left: -(windowWidth * currentSlide)
  }, animationTime);
  setActiveIndicator();
  $('.progress-bar').eq(currentSlide).animate({
    width: '0%'
  }, animationTime);
}

function postitionSlides () {
  var windowWidth = $(window).width();
  setSlideDimensions();
  $slideContainer.css({
    left: -(windowWidth * currentSlide)
  }, animationTime);
}

function setActiveIndicator () {
  var $indicator = $('.indicator');
  $indicator.removeClass('active').removeClass('complete');
  $indicator.eq(currentSlide).addClass('active');
  for(var i = 0; i < currentSlide; i++){
    $indicator.eq(i).addClass('complete');
  }
}

setSlideDimensions();
generatePagination();
$(window).resize(postitionSlides);
$('.next').on('click', goToNextSlide);
$('.previous').on('click', goToPreviousSlide);

@charset "UTF-8";
*, html, body {
  font-family: "TrebuchetMS", trebuchet, sans-serif;
}

* {
  box-sizing: border-box;
}

h1, h2 {
  text-align: center;
}

h1 {
  font-size: 24px;
  line-height: 30px;
  font-weight: bold;
}

h2 {
  font-size: 18px;
  line-height: 25px;
  margin-top: 20px;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 14px 50px;
  border-radius: 4px;
  background-color: #37B595;
  color: #FFFFFF;
  text-transform: capitalize;
  font-size: 18px;
  line-height: 22px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
}
button:hover {
  background-color: #1A7F75;
}
button.previous {
  background-color: #A2ACAF;
}
button.previous:hover {
  background-color: #5A5F61;
}

.full-width-container {
  width: 100%;
  min-width: 320px;
}

.sized-container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.slide-container {
  position: relative;
  left: 0;
  overflow: hidden;
}

.slide {
  float: left;
}
.slide .sized-container {
  padding: 75px 25px;
}

.button-container {
  border-top: 1px solid black;
  overflow: hidden;
  padding-top: 30px;
}
.button-container button {
  float: right;
  margin-left: 30px;
}

.pagination-container {
  margin-top: 120px;
}

.pagination {
  width: 100%;
  text-align: center;
  padding: 0 25px;
}

.indicator {
  width: 25px;
  height: 25px;
  border: 4px solid lightgray;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s;
  position: relative;
}
.indicator .tag {
  position: absolute;
  top: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: lightgray;
  white-space: nowrap;
}
.indicator.active, .indicator.complete {
  border-color: #37B595;
}
.indicator.active .tag, .indicator.complete .tag {
  color: #37B595;
}
.indicator.complete:after {
  content: "✓";
  position: absolute;
  color: #37B595;
  left: 4px;
  top: 3px;
  font-size: 14px;
}

.progress-bar-container {
  width: 10%;
  height: 4px;
  display: inline-block;
  background-color: lightgray;
  position: relative;
  top: -10px;
}
.progress-bar-container:last-of-type {
  display: none;
}
.progress-bar-container .progress-bar {
  width: 0;
  height: 100%;
  background-color: #37B595;
}

<div class="pagination-container full-width-container">
  <div class="sized-container">
    <div class="pagination"></div>
  </div>
</div>
<div class="viewport full-width-container">
  <ul class="slide-container">
    <li class="slide" data-tag="Basic Info">
      <div class="sized-container">
        <h1>Slide1.</h1>
		  <input class="next" name="next" type="button" value="next" />
      </div>
    </li>
    <li class="slide" data-tag="Expertise">
      <div class="sized-container">
        <h1>Slide2.</h1>
      </div>
    </li>
    </ul>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

有人可以帮我吗！