昨天我问了一个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 tocken ILLEGAL
我还应该补充一点,我的目标是每次只有一个位置可见。我有一个“后退”和“下一步”按钮,允许用户从 posOne 转到 posTwo、posThree,等等。因此,除了使 posTwo 可见之外,我还需要使 posOne 和/或 posThree 不可见。
谢谢!
最佳答案
第一件事是将所有这些 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”)。
关于javascript 使用循环来更改具有特定类的每个元素的显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34950249/