javascript使用循环来更改具有特定类的每个元素的显示

Question

昨天我问了一个question about improving efficiency in my code .今天我有另一个问题，本着同样的精神，试图写更少的代码行来完成重复的任务。

我有以下代码:

function myIntroductionText() {
    introPos.style.display = 'block';
    posOne.style.display = 'none';
    posTwo.style.display = 'none';
    posThree.style.display = 'none';
    posFour.style.display = 'none';
    posFive.style.display = 'none';
    posSix.style.display = 'none';
    posSeven.style.display = 'none';
    posEight.style.display = 'none';
    posNine.style.display = 'none';
    posTen.style.display = 'none';
    posEleven.style.display = 'none';
    backButton.style.visibility = 'hidden';
}

function myPositionOne() {
    introPos.style.display = 'none';
    posOne.style.display = 'block';
    posTwo.style.display = 'none';
    posThree.style.display = 'none';
    posFour.style.display = 'none';
    posFive.style.display = 'none';
    posSix.style.display = 'none';
    posSeven.style.display = 'none';
    posEight.style.display = 'none';
    posNine.style.display = 'none';
    posTen.style.display = 'none';
    posEleven.style.display = 'none';
    backButton.style.visibility = 'visible';
}

function myPositionTwo() {
    introPos.style.display = 'none';
    posOne.style.display = 'none';
    posTwo.style.display = 'block';
    posThree.style.display = 'none';
    posFour.style.display = 'none';
    posFive.style.display = 'none';
    posSix.style.display = 'none';
    posSeven.style.display = 'none';
    posEight.style.display = 'none';
    posNine.style.display = 'none';
    posTen.style.display = 'none';
    posEleven.style.display = 'none';
}

HTML 看起来像这样:

<p class="textContent" id="introductionText">Introduction Text Goes Here</p>
                <p class="textContent" id="position1">content1</p>
                <p class="textContent" id="position2">content2</p>
                <p class="textContent" id="position3">content3</p>

每个位置(即 introPos、posOne、posTwo)也有一个对应的函数，看起来与上面的函数基本相同，除了它会根据它所处的位置改变显示。

我在想我可以使用循环和/或 if/else 语句来使这项任务更有效率。我尝试使用 getElementsByClassName('textContent')，它(我认为)生成了一个包含该类所有元素的数组。根据 console.log 包含 [p#introductionText.textContent、p#position1.textContent，等等……]。所以，我写了下面的代码来尝试遍历它:

var blanks = document.getElementsByClassName("textContent") // this creates the array that I mentioned
for (item in blanks) {
            if (blanks[0] === introductionText.textContent) {
                blanks[0].style.display = 'block';
            } else {
                blanks[item].style.display = 'block';
                }
        }

我尝试使用 p#introductionText.textContent 但返回了一个错误。我是 JavaScript 的新手，所以我完全意识到我可能会在这里做一些非常愚蠢的事情，但我们将不胜感激。

编辑:错误消息显示 Uncaught SyntaxError: Unexpected token ILLEGAL

我还应该补充一点，我的目标是每次只显示一个位置。我有一个“后退”和“下一步”按钮，允许用户从 posOne 转到 posTwo，再转到 posThree，等等。因此，除了使 posTwo 可见之外，我还需要使 posOne 和/或 posThree 不可见。

谢谢!

Answer 1

第一件事是将所有这些 Javascript 样式表达式移动到 CSS:

#introPos, 
#posOne,
#posTwo, 
#posThree, 
#posFour, 
#posFive, 
#posSix, 
#posSeven, 
#posEight, 
#posNine, 
#posTen, 
#posEleven {
    display: none;
}

或者更短

#introductionText>.textContent {
    display: none;
}

这将使您能够大大缩短每个函数:

function myPositionOne() {
    posOne.style.display = 'block';
    backButton.style.visibility = 'visible';
}

无需通过 JS 一次又一次地设置每个样式，您只需设置那些发生变化的样式即可。

下一步是将所有这些函数重写为一个接受参数的函数，您的目标元素是:

function myPosition(pos) {
    var parent = document.getElementById("text-container");
    var children = parent.getElementsByClassName("textContent");

     var element;
    // first hide all <p class="textContent"> children
    for (var i = 0; i < children.length; i++) {
        children[i].style.display = 'none';
        if (i == pos) {
          element = children[i];
        }
    }

    // then show the right one

    if (element) {
        element.style.display = 'block';
    }

    // show or hide the back button depending on which child we are dealing with
    if (pos > 0) {
        document.getElementById("backButton").style.visibility = 'visible';
    } else {
        document.getElementById("backButton").style.visibility = 'hidden';
    }
    if (pos >= children.length-1) {
        document.getElementById("nextButton").style.visibility = 'hidden';
    } else {
            document.getElementById("nextButton").style.visibility = 'visible';
    }
}

这仅设置子编号 #pos 可见并调整后退按钮的可见性(假设后退按钮的 ID 为“backButton”)。