JavaScript的使用循環改變，有一個特定的類

昨天我問了question about improving efficiency in my code每個元素的顯示。今天我還有另外一個問題，就是試圖編寫更少的代碼來完成重複任務。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="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'; 
       } 
     }

我試圖用對＃introductionText.textContent而是返回了一個錯誤。我對JavaScript很陌生，所以我完全認識到我可以在這裏做一些非常愚蠢的事情，但任何幫助，將不勝感激。

編輯：錯誤消息稱未捕獲的SyntaxError：意外tocken非法

我還要補充一點，我的目標是隻有一個位置是每次可見。我有一個「後退」和「下一步」按鈕，允許用戶從posOne去posTwo，以posThree，等等。因此，除了使posTwo可見外，我還需要使posOne和/或posThree不可見。

謝謝！

來源

2016-01-22 user3822485

什麼是錯誤訊息？ – Teemu

什麼是錯誤？ – Evers

沒有必要每次將所有元素都重置爲none。你只需要做一次。 – MinusFour

的第一件事是所有這些的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」）。

來源

2016-01-22 15:46:31

這種方法的問題是我想在任何給定的時間只有一個位置內容在屏幕上。我有一個Next和Back按鈕，從#introPos移動到#posOne，到#posTwo等，所以我也需要將所有其他顯示改回無。我道歉，我應該在我的問題中明確表達，我已經編輯過。 – user3822485

我已經添加了對最後一個函數的註釋，以顯示其他所有內容的隱藏位置。 –

我試過但內容不顯示。後退/下一步按鈕按照他們應該的方式工作，但不顯示內容。我在調用這樣的函數： 'function moveRight（）{if（position === 1）{ myPosition（1）; } }' – user3822485

也許這樣：所有段落也都有類「textContent」。使這顯示無，並通過給予一段-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，你也可以使用下面的，而不是爲循環：

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

來源

2016-01-22 15:53:45 Krant

JavaScript的使用循環改變，有一個特定的類

回答

相關問題