如何使用document.write()来编写一个事件，除非它已经写好了？
如何使用document.write()来编写一个事件，除非它已经写好了？
提问于 2015-11-12 23:27:05
我已经创建了一个包含:事件位置、日期、事件名称的数组。我使用一个forEach循环来迭代每个事件，并使用document.write打印细节。那部分进行得很顺利。
但是，我不想每次都打印事件的标题。我只想打印一次标题，然后再打印它下面的细节。为了澄清，我希望它在视觉上看起来如下所示：
会见并问候
- 波士顿11月
- 纽约12月
- 和谐五月
- 辛辛那提10月
饮料咖啡
- 得克萨斯八月
- 圣安东尼奥二月
与我共舞
- 锚地6月
这里就是它在视觉上的样子。如果你看一下代码笔，它现在所做的就是写标题的值。如果事件的标题是唯一的，并且只有一次，那么如何覆盖它的值？这里是我个人尝试使用if循环并重新分配标题的值。
<script>
var events =
[
["New York", "November 5-8, 2015", "Meet and Greet"],
["Detroit", "November 5-8, 2015", "Meet and Greet"],
["Boston", "April 5-8, 2015", "Meet and Greet"],
["Boston", "November 5-8, 2015", "Drink Coffee"],
["Boston", "July 5-8, 2015", "Drink Coffee"],
["Phoenix", "December 5-8, 2015", "Drink Coffee"],
["Phoenix", "July 5-8, 2015", "Dance With Me"],
["Phoenix", "April 5-8, 2015", "Dance With Me"],
["Boston", "December 5-8, 2015", "Dance With Me"],
["Boston", "December 5-8, 2015", "Dance With Me"],
["Boston", "October 5-8, 2015", "Dance With Me"],
["Boston", "September 5-8, 2015", "Kiss Me... I'm Irish"],
["Orlando", "May 5-8, 2015", "Kiss Me... I'm Irish"],
["Orlando", "August 5-8, 2015", "Kiss Me... I'm Irish"],
["Orlando", "February 5-8, 2015", "Potty Training"],
["Boston", "June 5-8, 2015", "Potty Training"],
["Boston", "May 5-8, 2015", "Potty Training"],
["Boston", "February 5-8, 2015", "I Married an Axe Murderer"],
["Boston", "September 5-8, 2015", "Meet The Authors"],
["San Antonio", "August 5-8, 2015", "Meet The Authors"],
["San Antonio", "January 5-8, 2015", "Sponsorship"],
["San Antonio", "October 5-8, 2015", "Sponsorship", ],
["Boston", "January 5-8, 2015", "Lose Weight... FAST"],
["Boston", "October 5-8, 2015", "Lose Weight... FAST"],
["Boston", "August 5-8, 2015", "Getting Started"]
];
events.forEach(function(entry) {
var month = entry[1].split(' ');
var calNum = entry[1].split(' ')[1].charAt(0);
var title = "Sweeps Events";
document.write(
title
+ "<div class='panel panel-default event'>"
+ "<div class='row month-icon'>"
+ "<div class='col-md-1 text-center'>"
+ month[0]
+ "<br>"
+ "<span class='fa-stack fa-2x'>"
+ "<i class='fa fa-calendar-o fa-stack-2x'></i>"
+ "<strong class='fa-stack-1x calendar-text'>"+calNum+"</strong>"
+ "</span>"
+ "</div>"
+ "<div class='col-md-6'>"
+ "<h3 class='event-headers'>"
+ entry[1]
+ "<h3>"
+ "<h3 class='event-headers'>"
+ entry[0]
+ "</h3>"
+ "</div>"
+ "<div class='col-md-5 text-right'>"
+ "<a class='btn btn-lg btn-block btn-success' href='#''><i class='fa fa-pencil fa-2x'></i><strong>Register Now</strong></a>"
+ "</div>"
+ "</div>"
+ "</div>"
);
});
</script>回答 2
Stack Overflow用户
发布于 2015-11-12 23:40:42
Document.write甚至在规范中警告你，它不是100%可靠的。就像Oriol说的，尝试使用像document.getElementById()这样的DOM方法；
Stack Overflow用户
发布于 2015-11-14 20:51:30
何塞，
我刚做了那台发电机，所以它可能还不是100%，因为我看到了一个我以前没有意识到的错误。
无论如何，如果您循环处理这些事件，这应该是解决这个特定问题的绝对最简单的方法：
title = lastTitle != data[2]? lastTitle = data[2] : "";另一种说法是：
if (lastTitle != data[2]) {
title = data[2];
lastTitle = data[2];
} else {
title = "";
}只有当标题与上一个标题不同时，才显示标题。这就是为什么我说，如果您的数据是按顺序设置的，那么您就处于良好的状态。否则，它将变得复杂，它将更好地重组数据。
Array.foreach和document.write仍然不是好主意，所以现在我推荐这样的解决方案：
var lastTitle;
while
( entry = events.shift()
) {
var month = entry[1].split(' ');
var calNum = entry[1].split(' ')[1].charAt(0);
var title = lastTitle!=data[2]? lastTitle=data[2]: "";
document.body.appendChild(document.createElement('div'))
.innerHTML=(
title
+ "<div class='panel panel-default event'>"
+ "<div class='row month-icon'>"
+ "<div class='col-md-1 text-center'>"
+ month[0]
+ "<br>"
+ "<span class='fa-stack fa-2x'>"
+ "<i class='fa fa-calendar-o fa-stack-2x'></i>"
+ "<strong class='fa-stack-1x calendar-text'>"+calNum+"</strong>"
+ "</span>"
+ "</div>"
+ "<div class='col-md-6'>"
+ "<h3 class='event-headers'>"
+ entry[1]
+ "<h3>"
+ "<h3 class='event-headers'>"
+ entry[0]
+ "</h3>"
+ "</div>"
+ "<div class='col-md-5 text-right'>"
+ "<a class='btn btn-lg btn-block btn-success' href='#''><i class='fa fa-pencil fa-2x'></i><strong>Register Now</strong></a>"
+ "</div>"
+ "</div>"
+ "</div>"
);
}
;对于循环，您可能更愿意执行如下操作：
for
( var event, i=0
; event=events[i++];
) {
//
}或
var
event
, i = 0
;
while
( event = events[i++]
)
{
//
}或
for (var each in events)
( function as (event)
{
//
}
) (events[each]);对不起，我没能及时让发电机完全正常工作。我不愿使用它，直到我把它修好为止！不过，这应该是为了你的目的而耽搁你的！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33683350
复制相关文章
相似问题
腾讯云开发者
