Question

我刚开始学习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);  
}
}

我想创建一个函数，它会为我的链接添加正确的行为（显示文本并更改链接文本以隐藏或隐藏文本并更改要显示的链接文本），然后使用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>

提前感谢你！

Answer 1

这可以帮到你：

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

<强>更新

更仔细地阅读你的问题，我认为这就是你要做的事情：

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

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

1 个答案: