Question

我创建了一个包含以下内容的数组：[Event Location，Date，Event Name]。我正在使用forEach循环遍历每个事件并使用document.write打印出详细信息。那部分进展顺利。

但是，我不想在每个时间打印出事件的标题。我想只打印一次标题，然后打印下面的细节。为了澄清我希望它在视觉上看起来像这样：

见面和问候

波士顿十一月

纽约12月

Concord May

Cincinnati October

喝咖啡

Texas August

圣安东尼奥二月

与我共舞

安克雷奇六月

Here是视觉上的样子。如果您查看代码笔，它所做的就是立即编写title的值。如果事件的标题是唯一的，并且只打印出一次的标题，我怎么能覆盖它？ Here是我个人尝试使用if循环并重新分配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>

Answer 1

Document.write甚至在规范中警告你它不是100％可靠。像Oriol所说，尝试使用像document.getElementById（）;

这样的DOM方法

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]);

抱歉，我无法让发电机完全正常工作。我反对使用它直到我能修复它！不过，这应该会让你失望！

除非已经编写了事件，否则如何使用document.write（）编写事件？

2 个答案: