问题
I've created an array containing: [Event Location, Date, Event Name]. I am using a forEach loop to iterate through each event and using document.write to print out the details. That part is going well.
However, I don't want to print out the event's title every time. I want to print out the title only once and then the details beneath it. To clarify I want it to visually look something like this:
Meet and Greet
- Boston November
- New York December
- Concord May
- Cincinnati October
Drink Coffee
- Texas August
- San Antonio February
Dance With Me
- Anchorage June
Here is what it visually looks like. If you look at the code pen all it is doing is writing the value of title right now. How can I overwrite the value of the event's title if it is unique and print out that title only once? Here is my personal attempt at doing it using an if loop and reassigning the value of title.
<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>
回答1:
Document.write even warns you in the specs that it isn't 100% reliable. Like Oriol said, try to use a DOM method like document.getElementById();
回答2:
José,
I just made that generator, so it may not be 100% yet, because I'm seeing a bug I didn't realize before.
Anyway that you loop through the events though, this should be the absolute easiest way to solve this particular question:
title = lastTitle != data[2]? lastTitle = data[2] : "";
Another way of saying that is this:
if (lastTitle != data[2]) {
title = data[2];
lastTitle = data[2];
} else {
title = "";
}
Just show the title only if it differ's from the last title. That's why I say if your data is set up sequentially like that, then you're in good shape. Otherwise, it would get complicated and it would be better off restructuring the data.
Array.foreach and document.write are still not good ideas, so I'd recommend something like this as a solution for now:
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 the loop, you might rather do something like:
for
( var event, i=0
; event=events[i++];
) {
//
}
or
var
event
, i = 0
;
while
( event = events[i++]
)
{
//
}
or
for (var each in events)
( function as (event)
{
//
}
) (events[each]);
Sorry I couldn't get the generator completely working in time. I'd avise against using it until I can get it fixed! This should hold you over for your purposes, though!
来源：https://stackoverflow.com/questions/33683350/how-do-i-use-document-write-to-write-an-event-unless-it-is-already-written