单击以显示隐藏文本

时间:2015-01-07 09:07:48

标签: javascript html css

我一直试图弄清楚如何通过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消息时会出现。

以下是我的小提琴http://jsfiddle.net/kapena/6qf4j8cn/

的链接

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

非常感谢任何帮助。刚刚开始使用JS,请记住我是初学者。即使只是指出我正确的方向也会很酷:)

谢谢

3 个答案:

答案 0 :(得分:2)

在你学习的时候,我会做很多解释,所以请不要TL; DR。 : - )

两种不同的方法:

一个单独的元素

您想要做的事情有三个/四个部分:

  1. myBodyElement开始隐藏。

  2. 在页面上显示“点击阅读邮件”的其他内容。

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

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

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

    myBodyElement.style.display = "none";
    

    通过将另一个元素附加到页面来完成第2步,就像执行myBodyElement元素一样。你已经有了代码。

    第3步完全按照您的指示完成,对我们在步骤2中添加的元素使用addEventListener

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

    通过再次使用.style.display属性完成第4步,这次将myBodyElement.style.display设置为"block"(通常显示div的方式)并设置{ {1}}到.style.display的{​​1}}元素:

    clickToRead

    或者,您可以删除 "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);
    

答案 1 :(得分:2)

我知道你是在使用纯粹的Javascript解决方案,但对于那些感兴趣的人 - 这几乎可以完全用纯HTML / CSS实现:

&#13;
&#13;
input {
  display: none;
}
input + span {
  display: none;
}
input:checked + span {
  display: block;
}
input:checked + span + span {
  display: none;
}
&#13;
<label>
  <input type="checkbox" />
  <span>this is your message!</span>
  <span>click to read message</span>
</label>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

首先将display:none;添加到<div id="body">。这会在加载页面时隐藏元素。

然后添加一个按钮,将div的显示更改为block,并在点击时将其自己的显示更改为none

<button id="b" onclick="document.getElementById('body').style.display='block';document.getElementById('b').style.display='none';">Click to show message</button>

你应该做得好。 Your JSFiddle Updated