如何使用Javascript链接行为隐藏/显示文本

我刚刚开始学习JavaScript，我需要一些帮助。 我有一个HTML文件和一个CSS文件，在其中我不会做任何更改。 使用Javascript，我必须添加2个链接，这些链接将隐藏和显示类为“show”的段落。
在浏览器中打开HTML文件时，相关段落应隐藏

我已经阅读了这里写的关于隐藏/显示文本方法的几乎所有内容，但我仍然无法解决这个问题，而且我似乎无法让我的链接正常工作

这是迄今为止我在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);  
}
}

window.onload=function（）{
VaR PAR=文档.GETelEngsByTAGNITY（“P”）；
var parArray=[]；
对于（var i＝0；i＜PAR.长度；i++）{
如果（par[i].getAttribute（“类”）=“显示”）{
平行推力（第[i]段）；
par[i].style.display=“无”；
}  
}
控制台日志（par）；
控制台日志（并行）；
对于（i=0；i这将帮助您：

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);
};

函数切换（）{
//选择class=show的所有p元素。
VAR PAR=文档.QueRealStudioAL（'P.Stand）；
//显示隐藏p的链接。
var linkShow=document.getElementById（'linkShow'）；
//用于隐藏显示的p的链接。
var linkHide=document.getElementById（'linkHide'）；
对于（var i＝0；i＜PAR.长度；i++）{
//p当前样式显示。
var style=par[i].style.display；
//切换p样式显示。
par[i]。style.display=
（！style | | style=''无''
（样式=='none'？'block'：'none'）；
}
如果（linkShow！=null&&
linkHide！=null）{
//链接显示当前样式显示。
style=linkShow.style.display；
//切换两个链接的样式显示。
linkShow.style.display=（style='none'？'block'：'none'）；
linkHide.style.display=样式；
}
}
window.onload=函数（）{
//第一轮。
切换（）；
var container=document.getElementById（'container'）；
var link=document.createElement（'a'）；
var text=document.createTextNode（'Show more information'）；
link.appendChild（文本）；
link.title='显示更多信息'；
link.href='#'；
link.id='linkShow'；
link.addEventListener（“单击”，切换）；
container.appendChild（link）；
link=document.createElement（'a'）；
text=document.createTextNode（“隐藏信息”）；
link.appendChild（文本）；
link.title='隐藏信息'；
link.href='#'；
link.id='linkHide'；
link.style.display='none'；
link.addEventListener（“单击”，切换）；
container.appendChild（link）；
};


更新

仔细阅读你的问题，我认为这就是你想要做的：

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);
    }
};

功能切换（第一个）{
VAR PAR=文档.QueRealStudioAL（'P.Stand）；
//就在第一次跑步时。
如果（第一个===真）{
对于（var i＝0；i＜PAR.长度；i++）{
var style=par[i].style.display；
par[i]。style.display=
（！style | | style=''无''
（样式=='none'？'block'：'none'）；
}
返回；
}
//要切换的元素作为数据属性出现
//在单击的链接中设置的数据rel。
var ix=parseInt（this.getAttribute（'data-rel'）；
var-elToToggle=par[ix]；
var style=par[ix].style.display；
eltoggle.style.display=（style='none'？'block'：'none'）；
var linkShow=document.getElementById（'linkShow_'+ix.toString（））；
style=linkShow.style.display；
linkShow.style.display=
（！style | | style=''无''
（样式=='none'？'block'：'none'）；
var linkHide=document.getElementById（'linkHide_'+ix.toString（））；
style=linkHide.style.display；
linkHide.style.display=
（！style | | style=''无''
（样式=='none'？'block'：'none'）；
}
window.onload=函数（）{
切换（真）；
VAR PAR=文档.QueRealStudioAL（'P.Stand）；
对于（var i＝0；i＜PAR.长度；i++）{
var container=par[i].parentNode；
var link=document.createElement（'a'）；
var text=document.createTextNode（'Show more information'）；
link.appendChild（文本）；
link.title='显示更多信息'；
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（“隐藏信息”）；
link.appendChild（文本）；
link.title='隐藏信息'；
link.href='#'；
link.id='linkHide_'+i.toString（）；
link.setAttribute（'data-rel'，i）；
link.style.display='none'；
link.addEventListener（'click'，toggle，false）；
container.appendChild（link）；
}
};

为什么要嵌套您的
for
循环？您可以修改HTML吗？只需添加
style=“display:none；”
到隐藏页面，将其默认为false。您也无法将特定按钮与特定的
show
元素链接，您必须为
onclick
处理程序添加一些对象。您是否也考虑过使用jQuery？我不应该使用jQuery，也不能更改我的HTML代码或CSS代码。只需添加jQueryvaScript代码。谢谢！这帮了大忙。如果您能在切换函数中解释for循环和if循环的逻辑，我将不胜感激。我知道这是一个三元操作的东西，我可以“阅读”它，但无法理解您的想法。再次感谢。：
.querySelectorAll（）
将为您提供满足选择器要求的元素集合。我刚刚循环了这个列表。在第一次运行时，
p
不会定义任何样式
display
，当您希望它们开始隐藏时，我将其设置为t
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);
    }
};