Question

我正在尝试创建一个简单的进度条，其中click事件根据我的CSS类更改类：

所以我需要做的是确定当前的类是什么，并改变类的最后一个字符，所以如果当前的栏是：

并且用户点击下一个按钮：

脚本会是什么？

$(document).on('click', '.progress-next', function() {
  //1. get current step-?
  //2. incriment current step + 1
  //3. remove current step-? from .progress-bar (once i know how to handle getting the classes i have this part :) 
  //4. add new incremented class to .progress-bar (once i know how to handle getting the classes i have this part :)
});

.progress-bar {
  &.step-1 {
    width: 25%;
  }
  &.step-2 {
    width: 50%;
  }
  &.step-3 {
    width: 75%;
  }
  &.step-4 {
    width: 100%;
  }
}

<div class="progress">
	<div class="progress-bar progress-bar-striped step-1 active">Start</div>
</div>
<button class="btn btn-default progress-next">Next</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

试试这个，它应该是你想要的。

我离开了你的步骤，所以你可以按照代码及其作用。

＆＃13;

$(document).on('click', '.progress-next', function() {
  //1. get current step-?
  
  var cl = $(".progress-bar").attr("class").split(/\s/).filter(function( cn ) {
        return cn.indexOf('step') === 0;
    });
  //console.log(cl)
  
  //2. incriment current step + 1
  var step = parseInt(cl[0].split('-')[1]) + 1;
  //console.log(step)
  
  //3. remove current step-? from .progress-bar (once i know how to handle getting the classes i have this part :) 
  var newclass = "step-" + step;
  //console.log(newclass)
  
  //4. add new incremented class to .progress-bar (once i know how to handle getting the classes i have this part :) 
  $(".progress-bar").removeClass(cl[0]).addClass(newclass)
  
})

＆＃13;

.progress-bar {
  background-color: blue;
}

.progress-bar.step-1 {
  width: 25%;
}

.progress-bar.step-2 {
  width: 50%;
}

.progress-bar.step-3 {
  width: 75%;
}

.progress-bar.step-4 {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
  <div class="progress-bar progress-bar-striped step-1 active">Start</div>
</div>

<button class="btn btn-default progress-next">Next</button>

＆＃13;

Answer 2

查看该代码段。我改变了CSS中的内容，因为我不知道&符号的含义。我还添加了一个变量current，它获得了条形图的当前状态。

＆＃13;

//init the state of the bar
var current = 1;
$('.progress-bar').addClass('step-' + current)
//function to increase by buttonclick
$(document).on('click', '.progress-next', function() {
  $('.progress-bar').removeClass('step-' + current)
  current = current + 1
  $('.progress-bar').addClass('step-' + current)
})

＆＃13;

.progress-bar {
background: red;
}
.step-1 {
    width: 25%;
  }
 .step-2 {
    width: 50%;
  }
  .step-3 {
    width: 75%;
  }
  .step-4 {
    width: 100%;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
    <div class="progress-bar">Start</div>
</div>

<button class="btn btn-default progress-next">Next</button>

＆＃13;

Answer 3

由于第四步不需要递增，因此您只需要检查3个步骤。因此，您只需使用$('.progress-bar').hasClass('step-1')，$('.progress-bar').hasClass('step-2')和$('.progress-bar').hasClass('step-3')检查这3个类。

或者做一个小循环来缩短代码：

＆＃13;

$(document).on('click', '.progress-next', function() {
  var $progressbar = $('.progress-bar');
  for (var i = 1; i<4; i++) {
    var className = 'step-'+i;
    if ($progressbar.hasClass(className)) {
      $progressbar.removeClass(className).addClass('step-'+(i+1));
      break;
    }
  }
});

＆＃13;

.progress-bar {
  background-color: green;
}

.progress-bar.step-1 {
  width: 25%;
}

.progress-bar.step-2 {
  width: 50%;
}

.progress-bar.step-3 {
  width: 75%;
}

.progress-bar.step-4 {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
  <div class="progress-bar progress-bar-striped step-1 active">Start</div>
</div>
<button class="btn btn-default progress-next">Next</button>

＆＃13;

Jquery / JS进度条在按钮单击时更改类

3 个答案: