Как использовать document.write() для записи события, если оно уже не написано?

Question

Я создал массив, содержащий: [Местоположение события, Дата, Название события]. Я использую цикл forEach для повторения каждого события и использования document.write для распечатки деталей. Эта часть идет хорошо.

Однако я не хочу распечатывать название мероприятия каждые раз. Я хочу распечатать заголовок только один раз, а затем детали под ним. Для того, чтобы уточнить, я хочу, чтобы визуально выглядеть примерно так:

Встреча в

• Бостон ноября
• Нью-Йорк декабря
• Concord мая
• Cincinnati октября

Напиток Кофе

• Техас августа
• Сан-Антонио Февраль

Dance With Me

• Anchorage июня

Here является то, что она визуально выглядит. Если вы посмотрите на ручку кода, то все, что она делает, это записать значение названия прямо сейчас. Как я могу перезаписать значение названия события, если он уникален, и распечатать только этот заголовок раз? Here - моя личная попытка сделать это с использованием цикла 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> 

Answer 1

Документ.write даже предупреждает вас о том, что он не на 100% надежен. Как сказал Ориол, попробуйте использовать метод DOM, например document.getElementById();

Answer 2

Хосе,

Я только что сделал этот генератор, поэтому он не может быть 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]); 

Извините, я не мог заставить генератор полностью работать вовремя. Я бы не хотел использовать его, пока не смогу его устранить! Тем не менее, это должно держать вас за ваши цели!