javascript - 点击显示隐藏文字

Question

我一直在尝试弄清楚如何通过 JavaScript 隐藏和显示文本。我正在此处加载一个脚本 <script src="js/mail-generator.js"></script>生成消息数据。

我在这里从 mail-generator.js 中获取发件人使用下面的代码。

        var sender = currentMessage.sender;
        var body = currentMessage.body;
        var date = currentMessage.date;
        var subject = currentMessage.subject;

        // Sender 
        var mySenderElement = document.createElement('div');
        mySenderElement.setAttribute('id','sender')
        mySenderElement.innerHTML = sender;
        mainElement.appendChild(mySenderElement);

这在 HTML 中给出了这个结果 <div id="sender">Rick Roger</div>

现在我想获取消息数据，我在此处执行此操作

        // Body 
        var myBodyElement = document.createElement('div');
        myBodyElement.setAttribute('id','body');
        myBodyElement.innerHTML = body;
        mainElement.appendChild(myBodyElement);

我的结果在 HTML 中是这样的

<div id="body">We need to save Buffy from Hansel and Gretel. Well, you were busy trying to get yourself lit on fire. The only thing Willow was ever good for, the only thing I ever had going for me were those moments, just moments, where Tara would look at me and I was wonderful. Everyone's a hero in their own way, in their own not that heroic way. Planet's coming up a mite fast.</div>

我想要发生的是 body在页面加载时隐藏。代替body我想要一些文本，说点击阅读消息，当点击 body 时消息出现。

这是我的 fiddle 的链接 http://jsfiddle.net/kapena/6qf4j8cn/

我觉得解决方案与 .addEventListener("click", myFunction); 有关只是不确定如何隐藏段落并在文本中放置说单击以阅读消息。

如有任何帮助，我们将不胜感激。刚开始学习 JS，所以请记住我是初学者。即使只是指出正确的方向也会很酷 :)

谢谢

Answer 1

在你学习的过程中，我会做很多解释，所以请不要 TL;DR。 :-)

两种不同的方法:

一个单独的元素

您要执行的操作分为三/四个部分:

1. 开始隐藏 myBodyElement。

2. 页面上有其他内容显示“点击阅读消息”。

3. 让其他东西响应点击...

4. ...通过隐藏/删除自身(大概)并显示 myBodyElement。

第 1 步是通过将元素的 display 属性设置为 none 来完成的。在您设置 id 属性之后:

myBodyElement.style.display = "none";

第 2 步是通过将另一个元素附加到页面来完成的，这与您对 myBodyElement 元素的操作非常相似。您已经有了相应的代码。

第 3 步完全按照您的指示完成，方法是对我们在第 2 步中添加的元素使用 addEventListener:

clickToRead.addEventListener("click", function() {
    // Code to handle the click here
}, false);

第 4 步是通过再次使用 .style.display 属性完成的，这次将 myBodyElement.style.display 设置为 “block”(通常显示 div 的方式)并将 clickToRead 的 .style.display 元素设置为 "none":

clickToRead.addEventListener("click", function() {
    // Hide clickToRead
    clickToRead.style.display = "none";
    // Show myBodyElement
    myBodyElement.style.display = "block";
}, false);

或者，您可以删除 clickToRead 元素:

clickToRead.addEventListener("click", function() {
    // Remove clickToRead
    clickToRead.parentNode.removeChild(clickToRead);
    clickToRead = null;
    // Show myBodyElement
    myBodyElement.style.display = "block";
}, false);

交换文本

一种完全不同的方法是使用 myBodyElement 本身并仅换出它的 innerHTML。这实际上要简单得多。

代替你的

myBodyElement.innerHTML = body;

行，改用你的信息:

myBodyElement.innerHTML = "Click to read message";

然后像我们之前那样添加处理程序，但是添加到myBodyElement:

myBodyElement.addEventListener("click", function() {
    // Handle click here
}, false);

然后您可能已经知道该怎么做:在处理程序中再次设置 innerHTML:

myBodyElement.addEventListener("click", function() {
    myBodyElement.innerHTML = body;
}, false);

现在，拼图的另一 block :我们仍在响应点击并重新设置 innerHTML。这可能并不理想，我们可能应该停止响应点击。这增加了(一点点)复杂性:我们需要记住用作处理程序的函数，以便稍后删除它:

var handler = function() {
    myBodyElement.innerHTML = body;
    myBodyElement.removeEventListener("click", handler, false);
};
myBodyElement.addEventListener("click", handler, false);