Javascript Createable Text

Question

EDIT 2 - 我決定用jsfiddle創建一個簡單的例子。

http://jsfiddle.net/VqA9g/61/

正如你所看到的，我想引用新的div。

編輯 - d /噸反對票和不明確的問題

我有一個鏈接列表，像這樣：

var struct_list = function() { 
    this.id = 0; 
    this.name = 0; 
    this._head = null; 
}; 
struct_list.prototype = { 

// .. adding code , delete code ... 

list_contents: function() { 
    var current = this._head; 
    while (current != null) { 
     var div = document.createElement("div"); 
     div.style.width = "100px"; 
     div.style.height = "100px"; 
     div.style.background = "white"; 
     div.style.color = "black"; 
     div.style.top = "0px"; 
     div.style.left = "0px"; 
     div.style.margin = "400px 1000px auto"; 
     div.style.cursor = "pointer"; 
     div.innerHTML = current.name; 
     div.onclick = function (v) { var d = document.getElementById('div'); alert(d)}; 
     document.body.appendChild(div); 
     current = current.next; 
    } 
    return null; 
},}; 

我希望能夠顯示這個鏈表，每個項目顯示能夠與「onclick」進行交互。

實施例：

struct_list.add (0 , "Zero");
struct_list.add (1 , "One");

struct_list.list_contents（）;

_________________________________________________________________________ 
|                  | 
| <clickable> "Zero" that does a function(id) that passes over its ID(0) | 
|________________________________________________________________________| 
|                  | 
| <clickable> "One" <same as above>          | 
|________________________________________________________________________| 

對不起，如果我還不清楚。如果仍然不清楚，將會重新編輯。我很抱歉。

---

我有一個鏈接列表結構，我保存數據（它經常更改數據），我有一個setInterval來刷新它。我的問題是如何列出結構的內容，同時仍然能夠點擊公開的內容，現在我已經設置了鏈接列表中的每個內容都包含一個id。另外，如何確保y軸的自動溢出？我猜我必須把它放到一個已啓用的div中。

但我真正的問題是如何公開鏈接列表元素，同時也能夠通過onclick與他們進行交互。

我也不想使用純JavaScript以外的任何東西。

例（在我心中）將可能是這樣的：

<div id="PopUp"> 
    <script> 
     setInterval(function() { 
      if (struct_qued_list) { 
       struct_qued_list = false; 
       main.struct_list.list_contents(); // the linked list 
      } 
     }, 100); 
    </script> 
</div> 


list_contents: function() { 
    var current = this._head; 
    while (current != null) { 
     var div = document.createElement("div"); 
     div.style.width = "100px"; 
     div.style.height = "100px"; 
     div.style.background = "white"; 
     div.style.color = "black"; 
     div.style.top = "0px"; 
     div.style.left = "0px"; 
     div.style.margin = "400px 1000px auto"; 
     div.style.cursor = "pointer"; 
     div.innerHTML = current.name; 
     div.onclick = function (v) { var d = document.getElementById('div'); alert(d)}; 
     document.body.appendChild(div); 
     current = current.next; 
    } 
    return null; 
}, 

任何幫助或做這個邏輯的方式，將不勝感激。

Answer 1

這主要是一個範圍的問題，在你Edit 2 fiddle中，警報給出未定義，因爲您的i得到值2爲了離開循環。

這裏是一個可能的解決方案：Live demo (jsfiddle)

!function(){ 
    var index = i; // Make it independant of i 
    div.onclick = function() { alert(list[index]); }; 
}(); 

---

你也可以使用屬性來存儲任何值，而在函數中使用 this進行檢索。

---

或整個過程中導出到另一個函數來獲取這樣的事情：

for (var i = 0; i < 2 ; i++) { 
    doSomething(i); 
} 

Answer 2

當您向DOM添加新內容時JavaScript有時難以挑選。您可能需要使用DOM突變事件（如DOMNodeInserted）將事件偵聽器添加到文本節點。

document.addEventListener('DOMNodeInserted', function(){ 

    document.getElementById('thing').addEventListener('click', function(){ 
     alert('yey!'); 
    }); 

}); 

如果要插入節點而不刪除所有舊節點，則可能需要命名您的函數，以便您可以刪除它們。是的，這是純粹的JavaScript。

編輯：你的溢出問題，你可以爲你通過CSS插入和風格類將類分配給每個節點

.classname { 
    overflow: auto; 
}