您好,我有一个 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 之前的项目(lis)中添加一个新类,并且我需要在事件 li 之后向 lis 添加另一个类。或者仅将类 ui-state-disabled
添加到事件 li 之后的 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;
}
}
}
最佳答案
如果您只想将一个类附加到 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;
}
...
在评论中,您说“上一个”按钮逻辑工作不正常。我的建议是做类似的事情:
...
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 - javascript数组的动态访问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42966321/