昨天我问了一个关于提高代码效率的问题。今天我有另一个问题,同样的精神是尝试编写更少的代码行来完成重复性任务。
我有以下代码:
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, so on...]。因此,我编写了以下代码来尝试遍历它:
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 tocken ILLEGAL
我还应该补充一点,我的目标是每次只显示一个位置。我有一个“返回”和“下一步”按钮,允许用户从 posOne 转到 posTwo,再到 posThree,等等。因此,除了使 posTwo 可见之外,我还需要使 posOne 和/或 posThree 不可见。
谢谢!