javascript - 如何对数组中的元素有范围 - Jquery？

Question

我有一个关于 jquery 的问题。我创建了一个数组，其中包含当前类元素“li”的名称。我想单击另一个元素以从上一个元素中删除类“active”并将其分配给数组中包含的类。这是我负责此操作的一段代码:

$(document).ready(function(){
    var classes = [];

$('li').each(function (index){
    console.log(index + ':' + $(this).attr('class'));
    classes = [$(this).attr('class')];
    classes.toString();
    console.log(classes);
});

$('FirstElement').click(function(){
    if($('#FirstElement').hasClass('done')){
    console.log('It has done class');
}else{
    $(this).removeClass().addClass('active');
    $('#SecondElement').removeClass('active').addClass(classes[1]);
    $('#ThirdElement').removeClass('active').addClass(classes[2]);
    $('#FourthElement').removeClass('active').addClass(classes[3]);
}
});

元素“classes[0]”等未定义。我如何通过“classes[0]”等使用类的名称？感谢您的回复。

编辑:当然。感谢您的快速回复。

---

这是我的 HTML:

<ul id="ListOfCircles" class="qz-steps" role="">
<span id="FirstElement_block">
<li id="FirstElement" class="next" role="">
<i id="FirstItemIcon" class="icon-done fa fa-check" onclick="changeToBasicInfo();"></i>
<div id="FirstItemNumber" class="qz-step-text" onclick="" style="margin-top: 0px;margin-top: 0px;display:none">
<label class=" ThemeGrid_Width2" style="" for="">1</label>
</div>
<div id="FirstItemDescription" class="qz-step-desc" style="margin-top: 0px"></div>
</li>
</span>
<span id="SecondElement_block">
<li id="SecondElement" class="" role="">
<i id="SecondItemIcon" class="icon-done fa fa-check">  
</i>
<div id="SecondItemNumber" class="qz-step-text" onclick="" style="margin-top: 0px">
<label class=" ThemeGrid_Width2" style="" for="" onclick="changeToExperience();">2</label>
</div>
<div id="SecondItemDescription" class="qz-step-desc" style="margin-top: 0px">
</div>
</li>
</span>
<span id="ThirdElement_block">
<li id="ThirdElement" class="active" role="">
<i id="ThirdItemIcon" class="icon-done fa fa-check">
</i>
<div id="ThirdItemNumber" class="qz-step-text" onclick="" style="margin-top: 0px">
<label class=" ThemeGrid_Width2" style="" for="" onclick="changeToPreferences();">3</label>
</div>
<div id="ThirdItemDescription" class="qz-step-desc" style="margin-top: 0px">
</div>
</li>
</span>
<span id="FourthElement_block"><li id="FourthElement" class="next" role="">
<i id="FourthItemIcon" class="icon-done fa fa-check"></i>
<div id="FourthItemNumber" class="qz-step-text" onclick="" style="margin-top: 0px">
<label class=" ThemeGrid_Width2" style="" for="" onclick="changeToPrice();">4</label>
</div>
<div id="FourthItemDescription" class="qz-step-desc" style="margin-top: 0px">
</div>
</li>
</span>
</ul>

CSS 在这里:

qz-step-container {
  text-align: center;
  position: relative;
  width: 100%;
}
qz-step-container qz-steps {
  margin: 0;
  padding: 0;
}
qz-step-container qz-steps li {
  width: calc(16.66666667%);
  color: #CDD0DC;
  line-height: 50px;
  display: inline-block;
  font-size: 14px;
  position: relative;
  height: 50px;
}
qz-step-container qz-steps li .icon-done {
  color: #fff;
  font-size: 18px;
  display: none;
}
qz-step-container qz-steps li:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  left: 50%;
  top: 0;
  bottom: 0;
  margin: auto 0 auto 0;
  z-index: -2;
}
qz-step-container qz-steps li:last-child:after {
  content: '';
  width: 0;
}
qz-step-container qz-steps li.active {
  color: #fee103;
  cursor: default;
  z-index: 1;
}
qz-step-container qz-steps li.active:before {
  border: 2px solid #fee103;
  z-index: 1;
}
qz-step-container qz-steps li.next {
  color: #fee103;
  cursor: default;
  z-index: 0;
}
qz-step-container qz-steps li.next:before {
  border: 2px solid #E1E1E1;
  z-index: 0;
}
qz-step-container qz-steps li.done {
  color: #fee103;
  cursor: default;
}
qz-step-container qz-steps li.done .icon-done {
  display: inherit;
}
qz-step-container qz-steps li.done .qz-step-text {
  display: none;
}
qz-step-container qz-steps li.done:before {
  background: #fee103;
  border: 2px solid #fee103;
}
qz-step-container qz-steps li.done:after {
  background: #fee103;
}
qz-step-container qz-steps li.disabled {
  cursor: default;
}
qz-step-container qz-steps li.disabled:before {
  background: #e2e2e2;
  border: 2px solid #e2e2e2;
}
qz-step-container qz-steps li:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  font-size: 16px;
  background: #ffffff;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: 0 auto 5px auto;
  z-index: -1;
}
qz-step-container qz-steps li:nth-child(10) {
  z-index: 10;
}
qz-step-container qz-steps li:nth-child(9) {
  z-index: 9;
}
qz-step-container qz-steps li:nth-child(8) {
  z-index: 8;
}
qz-step-container qz-steps li:nth-child(7) {
  z-index: 7;
}
qz-step-container qz-steps li:nth-child(6) {
  z-index: 6;
}
qz-step-container qz-steps li:nth-child(5) {
  z-index: 5;
}
qz-step-container qz-steps li:nth-child(4) {
  z-index: 4;
}
qz-step-container qz-steps li:nth-child(3) {
  z-index: 3;
}
qz-step-container qz-steps li:nth-child(2) {
  z-index: 2;
}
qz-step-container qz-steps li:nth-child(1) {
  z-index: 1;
}

Answer 1

你可以这样做

var lis = $("#ListOfCircles li");
lis.on("click",function(){
  lis.removeClass("active");
  $(this).addClass("active");
})

希望这就是您所需要的。