单击按钮后将 'check' class 添加到上一项

Question

我正在尝试在 上一个项目 上添加 class 未锁定 当我点击按钮和我的 current 移动到下一项，但我不知道如何操作。当前功能运行良好，但我想添加解锁 class。任何帮助都会很棒。

<ul>
        <li class="locked" *ngFor="let subLecture of lectureList; let j = index"
            [ngClass]="{ 'current': lectureIndex == j}"
            (click)="lectureItemClick(j)">
          <a>{{subLecture}}</a>
        </li>
      </ul>
      <button (click)="nextLectureSecond()">Next</button>

附上演示： https://stackblitz.com/edit/angular-ivy-cdiev5

Answer 1

虽然如果您使用服务器端渲染不建议使用 document 关键字，但您也可以使用其他解决方法，您也可以按照以下方式进行操作。

<li class="locked" *ngFor="let subLecture of lectureList; let j = index"      [id]="j">
....
</li>

nextLectureSecond() {
    ....
    let ele = document.getElementById(this.lectureIndex.toString());
    (<HTMLParagraphElement>ele).classList.add("unlocked");
    const a = this.lectureIndex++;
    ....
}

Working Example

Answer 2

您也可以在 [ngClass] 中添加另一个条件，例如 'unlocked': lectureIndex > j 如果您希望将 class 应用于所有先前的项目。

看看这是否有帮助：

<ul>
    <li class="locked" *ngFor="let subLecture of lectureList; let j = index"
        [ngClass]="{ 'current': lectureIndex == j, 'unlocked': lectureIndex > j}"
        (click)="lectureItemClick(j)">
      <a>{{subLecture}}</a>
    </li>
  </ul>

同样，您可以更改逻辑以适合您的场景。

Stackblitz：https://stackblitz.com/edit/angular-ivy-62422113

Answer 3

只是上一项？像这样更改您的 ng-class 声明： [ngClass]="{ 'current': lectureIndex == j, 'unlocked' : (lectureIndex!=0 && lectureIndex - 1 == j )}" Se here

单击按钮后将 'check' class 添加到上一项

Add 'check' class to previous item after clicking a button

javascript

click

dom-events

angular