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（＆＃39; textContent＆＃39;），它（我认为）生成了一个包含该类的所有元素的数组。根据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

我还应该补充一点，我的目标是每次只能看到一个位置。我有一个＆＃34; Back＆＃34;和＆＃34;下一步＆＃34;允许用户从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”）。

Answer 2

也许这个：所有段落也都有“textContent”类。使此显示为none，并通过给定的段落ID显示正确的段落：

function myFunction(classDisplay) {

   var elems = document.getElementsByClassName('textContent');
   for (var i=0;i<elems.length;i+=1){
      elems[i].style.display = 'none';
   }
   document.getElementById(classDisplay).style.display = "block";
}

以下将隐藏除位置2之外的所有内容：

    myFunction("position2");

我不知道后退按钮，这总是可见的？

编辑：我已对此进行了测试并更正了代码。

如果您使用JQuery，您还可以使用以下代替for循环：

$('.textContent').css('display','none');

Answer 3

在较新版本的 JavaScript 中，您可以使用：

Array.from(document.getElementsByClassName('myclass')).forEach((item) => {
    item.style.backgroundColor = "blue";
 })

javascript使用循环来更改具有特定类

3 个答案: