0

编辑 2 - 我决定用 jsfiddle 创建一个简单的例子。

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

如您所见，我正在尝试引用新的 div。

编辑- d/t 反对票和不清楚的问题

我有一个像这样的链表：

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 中。

但我真正的问题是如何公开链接列表元素，同时还能够通过点击与它们进行交互。

我也不想使用纯 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;
},

任何帮助或合乎逻辑的方式将不胜感激。

4

2 回答 2

1

这主要是一个范围问题，在您的Edit 2 fiddle中，警报给出 undefined 因为您i获得了值2以离开循环。

这是一个可能的解决方案：现场演示（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);
}
于 2012-09-09T08:19:18.850 回答
-1

当您向 DOM 中添加新内容时，JavaScript 有时很难找到它。您可能需要使用 DOM 突变事件（如DOMNodeInserted）将事件侦听器添加到您的文本节点。

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

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

 });

如果要插入节点而不删除所有旧节点，您可能需要命名函数以便也可以删除它们。是的，这是纯 JavaScript。

编辑：对于您的溢出问题，您可以在插入时为每个节点分配一个类并通过 CSS 设置该类的样式

 .classname {
     overflow: auto;
 }
于 2012-09-09T04:07:03.917 回答