javascript数组的动态访问

Question

您好，我有一个 dom 元素 (li) 数组，如下所示：

Array[4]
0:li.ui-steps-item.ui-state-default
1:li.ui-steps-item.ui-state-highlight
2:li.ui-steps-item.ui-state-default.ui-state-disabled
3:li.ui-steps-item.ui-state-default.ui-state-disabled

我有一个点击事件，并将一个类附加到列表中。意思是当我点击时，如果 li 不是激活的 li，那么其他 li 的类将附加这个额外的类。

private _btnClick(_btn: any, config:any):void {
    var nodesArray=Array.prototype.slice.call(this._vcr.element.nativeElement.querySelectorAll('li.ui-steps-item'));
    for (let x in nodesArray) {
        if (nodesArray[x] != nodesArray[this._activeIndex]) {
            nodesArray[x].classList.add('ui-state-disabled');
            console.log(nodesArray[x]);
        }
    }
}

现在我需要实现的是，我需要在活动 li 之前的 items(lis) 中添加一个新类，并且我需要在活动 li 之后的 lis 中添加另一个类。或者仅在活动 li 之后的 li 中添加类 ui-state-disabled。我怎样才能做到这一点？有什么想法吗？

点击按钮代码：

private _btnClick(_btn: any, config:any):void {
        this.buttonEvent.emit({btn:_btn, formBtns:this._formBtn}); // Event emitter

        let arrLen: any = config.length-1;

        if (_btn.BtnType=="next"){
            if (this._activeIndex < config.length -1) {
                this._activeIndex++;
            }
            if (this._activeIndex == arrLen){
                _btn.label = "Confirm";
                // _btn.disabled = true;
                // _btn.class = 'btn-success';
            }
            for (let x in this._formBtn){
                if (this._formBtn[x].BtnType  == "previous"){
                    this._formBtn[x].disabled = false;
                    this._formBtn[x].hidden = false;
                    break;
                }

            }
        }
        else if (_btn.BtnType=="previous"){
            this._activeIndex--;
            for (let x in this._formBtn){
                if (this._formBtn[x].BtnType  == "previous"){
                    if(this._activeIndex == 0) {
                        this._formBtn[x].hidden = true;
                        continue;
                    }
                }
                if(this._formBtn[x].BtnType == "next") {
                    if(this._formBtn[x].label == "Confirm") {
                          this._formBtn[x].label = "Next";
                          this._formBtn[x].disabled = false;
                          this._formBtn[x].class = 'btn-text';
                          continue;
                    }
                }
            }
        }
        this._emitStepVal(this._finalConfig);
        // console.log(this._vcr.element.nativeElement.querySelectorAll('li.ui-steps-item'));
        var nodesArray = Array.prototype.slice.call(this._vcr.element.nativeElement.querySelectorAll('li.ui-steps-item'));

        var addClass = false;
        for (var i = 0; i < nodesArray.length; i++) {
            if (addClass) nodesArray[i].classList.add('ui-state-disabled');
            if (i === this._activeIndex) {
                addClass = true;
            }       
        }

    }

Answer 1

如果您只想在活动 li 之后出现的 li 附加一个类，您可以这样做：

var addClass = false;

for (var i = 0; i < nodesArray.length; i++) {

  if (addClass ) 
     nodesArray[i].classList.add('ui-state-disabled');
  else
     nodesArray[i].classList.remove('ui-state-disabled');

  if (i === this._activeIndex) addClass = true; 
}
...

在 cmets 中，您说“以前的”按钮逻辑无法正常工作。我的建议是这样做：

...
else if (_btn.BtnType == "previous") {
  if (this._activeIndex > 0) {
    this._activeIndex--;
  }
  if (this._activeIndex == 0) {
    _btn.disabled = true;
    //_btn.hidden = true; // if you want to hide the previous button when at the first item
  }
  for (let x in this._formBtn) {
    if (this._formBtn[x].BtnType == "next") {
      this._formBtn[x].disabled = false;
      this._formBtn[x].hidden = false;
      break;
    }
  }
}
...