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之后将类ui-state-disabled添加到li。我怎样才能做到这一点？任何想法的人？

点击按钮代码：

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; 
}
...

在评论中你说过＆＃34;之前＆＃34;按钮逻辑无法正常工作。我的建议是做一些事情：

...
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;
    }
  }
}
...

动态访问javascript数组

1 个答案: