我一直试图弄清楚如何通过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,请记住我是初学者。即使只是指出我正确的方向也会很酷:)
谢谢
答案 0 :(得分:2)
在你学习的时候,我会做很多解释,所以请不要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);
答案 1 :(得分:2)
我知道你是在使用纯粹的Javascript解决方案,但对于那些感兴趣的人 - 这几乎可以完全用纯HTML / CSS实现:
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;
答案 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