在 Javascript 中将 Javascript 嵌入到 HTML 中（Oi！）

Question

好吧...我正在尝试编写一些适用于 html 块的 javascript 代码，该代码本身出现在 javascript 文件中。真是一团糟。这是一个示例：

[new Date(1942,01,01), , '<div onclick="this.nextSibling.style.display=\'block\'; this.style.display=\'none\'"><img src="img/content/michenerCenterThumb.jpg" style="cursor:pointer" /></div><div style="display:none"><iframe width="200" height="165" src="http://www.youtube.com/embed/in7IUzjN3pY?rel=0" frameborder="0" allowfullscreen></iframe>'],

[编辑]我正在使用时间轴，可在此处使用：http://links.sourceforge。网/#timeline。构建时间线的一部分涉及添加条目，如本示例所示：

data.addRows([
      [new Date(2010,7,23), , 'Conversation<br>' + 
        '<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
      [new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' + 
        '<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
      [new Date(2010,7,24,16,0,0), , 'Report'],
      [new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],     
      [new Date(2010,7,28), , 'Memo<br>' + 
        '<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
      [new Date(2010,7,29), , 'Phone call<br>' + 
        '<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
      [new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],     
      [new Date(2010,8,4,12,0,0), , 'Report<br>' +
        '<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
    ]);

在 html 中，我想实现 jquery ui、highslider 等，但这很快就会变得混乱（如我上面的示例）。什么是“正确执行” “在这种情况下？

谢谢，

本

Answer 1

我想出了一个更优雅的解决方案......我希望更接近正确编码的构成。现在每个元素的html都写在html页面上了。我通过使用自定义 getElementsByClassName 来阅读此内容，它将每个项目类插入到一个数组中。然后该数组填充时间线。

html:

<div class="item" date="1956,1,1" enddate="1967,1,1">
Some Content    
</div>

和 javascript:

var items = getElementsByClassName("item"); 
    for (var x = 0; x < items.length; x++) {
         var date = items[x].getAttribute("date"); 
         var enddate = items[x].getAttribute("enddate"); 
         var html = items[x].innerHTML; 
            if (!enddate) {
                items[x]=[new Date(date), enddate, html];
            } else {         
                items[x]=[new Date(date), new Date(enddate), html]; 
            }
        }

    data.addColumn('datetime', 'start');
    data.addColumn('datetime', 'end');
    data.addColumn('string', 'content');

    data.addRows(items);

您可以在此处找到自定义 getElementsByClassName：http://code.google.com /p/getelementsbyclassname/