等价于 "All" 的 [i] 的替代项是什么？

Question

首先，我很抱歉这个菜鸟问题和糟糕的代码。

function toggleOnTranscript() {
    localStorage.setItem("doToggle", "true");
    var toggleStatus = localStorage.getItem("doToggle");
    if (toggleStatus = "true") {
        var transcriptDivs = document.getElementsByClassName("transcript");
        for (var i = 0; i < transcriptDivs.length; i++) {
            transcriptDivs[i].classList.add("show");
        }
    } else {
        console.log("Yeah! Nah! You clicked the wrong button, mate.");
    }
};

// ---------------------------------------------------

function toggleOffTranscript() {

    var toggleStatus = localStorage.getItem("doToggle");
    if (toggleStatus == "true") {
        var transcriptDivs = document.getElementsByClassName("transcript");
        for (var i = 0; i < transcriptDivs.length; i++) {
            transcriptDivs[i].classList.remove("show");
        }
        localStorage.setItem("doToggle", "false");
    } else {
        console.log("Yeah! Nah! You clicked the wrong button, mate.");
    }
};

* {
            font-family: Roboto, Arial, Helvetica, sans-serif;
        }

        .bttn {
            padding: 15px 30px;
            display: block;
            color: white;
            cursor: pointer;
            user-select: none;
        }

        .show-transcripts {
            background: green;
        }

        .hide-transcripts {
            background: red;
        }

        .transcript {
            display: none;
        }

        .transcript.show {
            display: block;
        }

<span class="bttn show-transcripts" onclick="toggleOnTranscript()">Show Transcripts</span>
    <div id="transcriptID1" class="transcript">
        <h2>Transcript Div #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum tincidunt elit non vulputate. Duis
            mollis risus libero, at hendrerit lacus consectetur in. In non vestibulum enim, a scelerisque augue.</p>
        <p>Fusce id nulla laoreet massa consequat feugiat vel aliquam ex. Donec tincidunt facilisis aliquet.</p>
    </div>
    <div id="transcriptID2" class="transcript">
        <h2>Transcript Div #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum tincidunt elit non vulputate. Duis
            mollis risus libero, at hendrerit lacus consectetur in. In non vestibulum enim, a scelerisque augue.</p>
        <p>Fusce id nulla laoreet massa consequat feugiat vel aliquam ex. Donec tincidunt facilisis aliquet.</p>
    </div>
    <span class="bttn hide-transcripts" onclick="toggleOffTranscript()">Hide Transcripts</span>

如果上面的代码片段不工作，请继续CodePen。

当您单击 "Transcript Button" 时，这会将一 (1) 个键和值保存到 localStorage，即 "doToggle", "true"。这将用于 If/Else 语句。
然后，会有一个if/else声明。如果 doToggle = true，则 class show 将添加 到所有 class 为 transcript 的分隔符。否则，请忽略/什么都不做。

我尝试使用

var transcriptDivs = document.getElementsByClassName("transcript");
for (var i = 0; i < transcriptDivs.length; i++) {
    transcriptDivs[i].classList.add("show");
}

这有效，并向所有具有 "transcript" class 的分隔符添加 "show" class。 但是，这只是忽略了完全错误的 if 条件。 它需要先检查是否 doToggle = true，然后将 class "show" 添加到 "transcript" 分隔符。

我真的不知道该如何解释。我希望你明白我的要求。我昨天才开始学JS。我试图不问任何问题。

TIA！

Answer 1

在你的第一个函数中，我看到你在 if 语句中赋值（而不是比较）。

function toggleOnTranscript() {
    localStorage.setItem("doToggle", "true");
    var toggleStatus = localStorage.getItem("doToggle");
    if (toggleStatus = "true") { // toggleStatus === "true"
        var transcriptDivs = document.getElementsByClassName("transcript");
        for (var i = 0; i < transcriptDivs.length; i++) {
            transcriptDivs[i].classList.add("show");
        }
    } else {
        console.log("Yeah! Nah! You clicked the wrong button, mate.");
    }
};

我在那里添加了评论 - toggleStatus === "true"

我通常也会使用 === 而不是 == 进行比较。这是选择使用哪一个的好资源：https://codeahoy.com/javascript/2019/10/12/==-vs-===-in-javascript/ 看看是否有帮助。

等价于 "All" 的 [i] 的替代项是什么？

What is the alternative of [i] that is equivalent to "All"?

javascript

for-loop

if-statement

class

toggle