首頁猿問單擊按鈕后將“檢查&r...

單擊按鈕后將“檢查”類添加到上一項(xiàng)

JavaScript

暮色呼如 2022-10-08 16:01:54

當(dāng)我單擊按鈕并且我當(dāng)前移動(dòng)到下一個(gè)項(xiàng)目時(shí)，我試圖添加一個(gè)在上一個(gè)項(xiàng)目上解鎖的類，但我不知道如何。當(dāng)前功能運(yùn)行良好，但我想添加解鎖類。任何幫助都會(huì)很棒。<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>這是一個(gè)附加的演示： https ://stackblitz.com/edit/angular-ivy-cdiev5

查看完整描述

3 回答

明月笑刀無情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

您也可以在中添加另一個(gè)條件[ngClass]，例如'unlocked': lectureIndex > j如果您希望將該類應(yīng)用于所有先前的項(xiàng)目。

看看這是否有幫助：

<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

反對(duì) 回復(fù) 2022-10-08

揚(yáng)帆大魚

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊

雖然document在使用服務(wù)器端渲染的情況下不建議使用關(guān)鍵字，但您也可以使用其他解決方法，您也可以按照以下方式進(jìn)行操作。

....

</li>

nextLectureSecond() {

....

let ele = document.getElementById(this.lectureIndex.toString());

(<HTMLParagraphElement>ele).classList.add("unlocked");

const a = this.lectureIndex++;

....

}

反對(duì) 回復(fù) 2022-10-08

Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

只是上一個(gè)項(xiàng)目？像這樣更改您的 ng-class 聲明： [ngClass]="{ 'current': lectureIndex == j, 'unlocked' : (lectureIndex!=0 && lectureIndex - 1 == j )}" Se here

反對(duì) 回復(fù) 2022-10-08