Встраивание Javascript в HTML в Javascript (Oi!)

Question

Хорошо ... Я пытаюсь написать некоторый код javascript, который будет применяться к блоку html, который сам появляется в файле 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.net/#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/