如何用Javascript隱藏/顯示文本 - 鏈接行爲

我剛開始學習JavaScript，我需要一些幫助。我有一個HTML文件和一個CSS文件，我不作任何改變。使用Javascript，我必須添加2個鏈接，它會隱藏和顯示類「show」的段落。
當您在瀏覽器中打開HTML文件時，應該隱藏有問題的段落。如何用Javascript隱藏/顯示文本 - 鏈接行爲

我已經閱讀了幾乎所有關於隱藏/顯示文本方法的文章，但我仍然無法解決問題，我似乎無法讓我的鏈接正常工作。

這是我已經在我的JavaScript代碼這麼遠：

window.onload = function(){ 
var par = document.getElementsByTagName("p"); 
var parArray = []; 


for (var i=0 ; i < par.length; i++) { 
    if (par[i].getAttribute("class") === "show") { 
     parArray.push(par[i]); 
     par[i].style.display = "none"; 
     } 
    } 

    console.log(par); 
    console.log(parArray); 

for (i=0 ; i<parArray.length; i++) { 
    var a = document.createElement('a'); 
    var linkText = document.createTextNode("Show more information"); 
    a.appendChild(linkText); 
    a.title = "Show more information"; 
    a.href = "#"; 
    parArray[i].parentNode.appendChild(a); 
} 
}

我想打一個函數，它會在適當的行爲添加到我的鏈接（顯示文本和更改鏈接文本隱藏或隱藏文本並更改顯示的鏈接文本），然後使用onclick事件處理函數調用該函數。

這裏是我的html代碼，以及：

<head> 
<meta charset="utf-8"> 
    <title>Javascript Hidden textarea</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="container"> 
    <div id="content"> 
     <div class="post"> 
       <h3> 
        Title 
       </h3> 
       <p class="author"> 
        paragraph One 
       </p>   
      <aside> 
       JavaScript 
      </aside> 
       <p> 
        paragraph two 
       </p> 
       <p class="show"> 
        ...We must hide this paragraph. 
       </p>  
     </div> 
     <div class="post"> 
       <h3> 
        Title 
       </h3> 
       <p class="author"> 
        paragraph One 
       </p>   
      <aside> 
       JavaScript 
      </aside> 
       <p> 
        paragraph two 
       </p> 
       <p class="show"> 
        ...We must hide this paragraph. 
       </p>  
     </div> 
    </div> 
</div> 
<script type="text/javascript" src="hidetext.js"></script> 
</body> 
</html>

預先感謝您！

來源

2014-08-28 JoeyPan

爲什麼你的'for'循環嵌套？你可以修改HTML嗎？只需將'style =「display：none;」'添加到隱藏頁面以將其默認爲false。您也無法將特定的按鈕與特定的'show'元素鏈接起來，您必須爲'onclick'處理程序添加一些內容以作爲目標。你有沒有考慮過使用jQuery？ – Tony 2014-08-28 19:06:14

我不應該使用jQuery，我不能更改我的HTML代碼或我的CSS代碼。只是JavaScript代碼。 – JoeyPan 2014-08-28 19:07:55

這會幫助你：

function toggle() { 
    // Select all the p elements with class = show. 
    var par = document.querySelectorAll('p.show'); 
    // The link to show the hidden p. 
    var linkShow = document.getElementById('linkShow'); 
    // The link to hide the shown p. 
    var linkHide = document.getElementById('linkHide'); 

    for (var i = 0; i < par.length; i++) { 
     // p current style display. 
     var style = par[i].style.display; 

     // Toggle the p style display. 
     par[i].style.display = 
      (!style || style == '' ? 'none' : 
      (style == 'none' ? 'block' : 'none')); 
    } 

    if (linkShow != null && 
     linkHide != null) { 
     // linkShow current style display. 
     style = linkShow.style.display; 

     // Toggle both links style display. 
     linkShow.style.display = (style == 'none' ? 'block' : 'none'); 
     linkHide.style.display = style; 
    } 
} 

window.onload = function() { 
    // First run. 
    toggle(); 

    var container = document.getElementById('container'); 
    var link = document.createElement('a'); 
    var text = document.createTextNode('Show more information'); 

    link.appendChild(text); 
    link.title = 'Show more information'; 
    link.href = '#'; 
    link.id = 'linkShow'; 
    link.addEventListener('click', toggle); 

    container.appendChild(link); 

    link = document.createElement('a'); 
    text = document.createTextNode('Hide information'); 

    link.appendChild(text); 
    link.title = 'Hide information'; 
    link.href = '#'; 
    link.id = 'linkHide'; 
    link.style.display = 'none'; 
    link.addEventListener('click', toggle); 

    container.appendChild(link); 
};

Demo

UPDATE

更仔細地讀你的問題，我想這就是你想要做什麼：

function toggle(first) { 
    var par = document.querySelectorAll('p.show'); 

    // Just on the first run. 
    if (first === true) { 
     for (var i = 0; i < par.length; i++) { 
      var style = par[i].style.display; 

      par[i].style.display = 
       (!style || style == '' ? 'none' : 
       (style == 'none' ? 'block' : 'none')); 
     } 

     return; 
    } 

    // The element to toggle is coming as a data attribute 
    // data-rel that's set in the clicked link. 
    var ix = parseInt(this.getAttribute('data-rel')); 
    var elToToggle = par[ix]; 
    var style = par[ix].style.display; 
    elToToggle.style.display = (style == 'none' ? 'block' : 'none'); 

    var linkShow = document.getElementById('linkShow_' + ix.toString()); 
    style = linkShow.style.display;  
    linkShow.style.display = 
     (!style || style == '' ? 'none' : 
     (style == 'none' ? 'block' : 'none')); 

    var linkHide = document.getElementById('linkHide_' + ix.toString()); 
    style = linkHide.style.display; 
    linkHide.style.display = 
     (!style || style == '' ? 'none' : 
     (style == 'none' ? 'block' : 'none')); 
} 

window.onload = function() { 
    toggle(true); 

    var par = document.querySelectorAll('p.show'); 

    for (var i = 0; i < par.length; i++) { 
     var container = par[i].parentNode; 
     var link = document.createElement('a'); 
     var text = document.createTextNode('Show more information'); 

     link.appendChild(text); 
     link.title = 'Show more information'; 
     link.href = '#'; 
     link.id = 'linkShow_' + i.toString(); 
     link.setAttribute('data-rel', i); 
     link.addEventListener('click', toggle, false); 

     container.appendChild(link); 

     link = document.createElement('a'); 
     text = document.createTextNode('Hide information'); 

     link.appendChild(text); 
     link.title = 'Hide information'; 
     link.href = '#'; 
     link.id = 'linkHide_' + i.toString(); 
     link.setAttribute('data-rel', i); 
     link.style.display = 'none'; 
     link.addEventListener('click', toggle, false); 

     container.appendChild(link); 
    } 
};

Demo

來源

2014-08-28 19:37:25 melancia

謝謝！這有很大幫助。如果你能解釋一下for循環的邏輯和toggle函數中的if循環，我將不勝感激。我知道它是一個三元操作的東西，我可以「讀」它，但不能真正理解你是如何看待它的。再次感謝。 :) – JoeyPan 2014-08-28 21:17:57

'.querySelectorAll（）'會爲你帶來滿足選擇器的元素集合。我剛剛通過這個清單。 – melancia 2014-08-28 21:23:19

第一次運行時，'p'沒有定義任何樣式的'display'，並且您希望它們開始隱藏，然後將其設置爲'none'。當您使用鏈接進行切換時，我只需檢查當前樣式顯示是什麼，然後切換它：'none' <=>'block'。 – melancia 2014-08-28 21:24:54

如何用Javascript隱藏/顯示文本 - 鏈接行爲

回答

相關問題