JavaScript使用循环来更改每个具有特定类的元素的显示 [英] javascript using a loop to change the display of every element that has a specific class

查看：120
本文介绍了JavaScript使用循环来更改每个具有特定类的元素的显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

昨天我问了一个关于提高我的代码效率的问题。今天我还有另一个问题，就是试图编写更少的代码行来完成重复任务。



我有以下代码：

  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 =textContentid =introductionText>简介文字转到此处< / p> 
< p class =textContentid =position1> content1< / p> 
< p class =textContentid =position2> content2< / p> 
< p class =textContentid =position3> content3< / p>

每个位置（即introPos，posOne，posTwo）也有一个对应的函数，上面的函数，除了它改变基于它在哪个位置的显示。



我想我可以使用循环和/或if / else语句使这项任务更有效率。我尝试通过使用getElementsByClassName（'textContent'），其中（我认为）生成一个数组包含该类的所有元素。根据console.log包含[p＃introductionText.textContent，p＃position1.textContent，等等...]。所以，我写了下面的代码来试图循环它：

  var blanks = document.getElementsByClassName（textContent）/ /这创建了我提到
的数组（空白项）{
 if（blanks [0] === introductionText.textContent）{
 blanks [0] .style.display = '块'; 
} else {
 blanks [item] .style.display ='block'; 
} 
}

我尝试使用p＃introductionText.textContent，一个错误。我对JavaScript很陌生，所以我完全认识到我可以在这里做一些非常愚蠢的事情，但任何帮助，将不胜感激。



编辑：
错误消息说未捕获的SyntaxError：意外tocken非法



我还应该补充说我的目标是每次只能看到一个位置。我有一个后退和下一步按钮，允许用户从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'; 
 
 $ / code>

不是通过JS重复设置每个样式，而是简单地设置那些改变的。



下一步是将所有这些函数重写为一个接受参数的元素：

  function myPosition（pos）{
 var parent = document.getElementById（text-container）; 
 var children = parent.getElementsByClassName（textContent）; 
 
 var element; 
 //首先隐藏所有< p class =textContent>儿童
为（var i = 0; i< children.length; i ++）{
 children [i] .style.display ='none'; 
 if（i == pos）{
 element = children [i]; 
 
 
 
 //然后显示正确的
 
 if（element）{
 element.style.display ='block ; 
} 
 
 //显示或隐藏后退按钮取决于我们处理的是哪个孩子
 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'; 
 
 
 
 
 $ b 
这仅设置子编号#pos可见并调整后退按钮的可见性（假设后退按钮的ID为backButton）。
 
Yesterday I asked a question about improving efficiency in my code. Today I have another question in the same spirit of trying to write less lines of code to accomplish repetitive tasks.



I have the following 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';
}

The HTML looks something like this:
<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>

Each position (i.e. introPos, posOne, posTwo) also has a corresponding function that looks essentially the same as the function above, except it changes the display based on which position it is in.



I'm thinking that I could use a loop and/or an if/else statement to make this task more efficient. I tried by using getElementsByClassName('textContent'), which (I think) produced an array containing all of the elements with that class. According to the console.log is contains [p#introductionText.textContent, p#position1.textContent, so on and so on...]. So, I wrote the following code to try to loop through it:
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';
                }
        }

I tried using p#introductionText.textContent but that returned an error. I'm very new to JavaScript so I fully recognize that I could be doing something very silly here, but any help would be appreciated.



EDIT:
The error message says Uncaught SyntaxError: Unexpected tocken ILLEGAL



I should also add that my goal is to have only one position be visible at each time. I have a "Back" and "Next" button that allows users to go from posOne to posTwo, to posThree, and so on. So, in addition to making posTwo visible, I also need to make posOne and/or posThree not visible.



Thanks!
 解决方案 
The first thing is moving all those Javascript style expressions to CSS:
#introPos, 
#posOne,
#posTwo, 
#posThree, 
#posFour, 
#posFive, 
#posSix, 
#posSeven, 
#posEight, 
#posNine, 
#posTen, 
#posEleven {
    display: none;
}

Or even shorter 
#introductionText>.textContent {
    display: none;
}

This would enable you to shorten each function considerably:
function myPositionOne() {
    posOne.style.display = 'block';
    backButton.style.visibility = 'visible';
}

Instead of setting each style via JS again and again, you'd simply set those that change.



The next step would be to rewrite all those functions into one that accepts a parameter which element you are targeting:
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';
    }
}

This sets only the child number #pos visible and adjusts the visibility of the back button (assuming the back button has the ID "backButton").


                        
这篇关于JavaScript使用循环来更改每个具有特定类的元素的显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆