如何用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隐藏/显示文本 - 链接行为

回答

相关问题