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消息时会出现。

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

的链接

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

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

谢谢

Answer 1

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

两种不同的方法：

一个单独的元素

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

让myBodyElement开始隐藏。
在页面上显示“点击阅读邮件”的其他内容。
让其他东西响应点击...
...通过隐藏/删除自己（大概）并显示myBodyElement。

通过将元素的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);

Answer 2

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

＆＃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;

Answer 3

首先将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

单击以显示隐藏文本

3 个答案:

一个单独的元素

交换文字