神祕的錯誤

Question

這是我的JavaScript類的一個代碼：

function Foo(text) 
{ 
    var container = document.createElement('span'); 
    container.innerHTML = text; 
    $("#fooContainer").append(container); 

    this.select = function() 
    { 
     $(container).addClass('selected'); 
    } 

    this.getContainer = function() 
    { 
     return container; 
    } 

    this.getText = function() 
    { 
     return text; 
    } 
} 

在每個頁面加載我做到以下幾點：

var fooList = {}; 

fooList['foo1'] = new Foo('Foo 1'); 
fooList['foo2'] = new Foo('Foo 2'); 
fooList['foo3'] = new Foo('Foo 3'); 

這將導致跨度爲每個foo對象正確創建，導致在這種情況下：

<div id="fooContainer"> 
    <span>Foo 1</span> 
    <span>Foo 2</span> 
    <span>Foo 3</span> 
</div> 

但是，如果我這樣做：

fooList['foo1'].select(); 

然後它會導致這樣的：

<div id="fooContainer"> 
    <span>Foo 1</span> 
    <span>Foo 2</span> 
    <span class="selected">Foo 3</span> 
</div> 

不是什麼預期，這是這樣的：

<div id="fooContainer"> 
    <span class="selected">Foo 1</span> 
    <span>Foo 2</span> 
    <span>Foo 3</span> 
</div> 

好像所有foo對象指向容器的container對象最後的foo，在這種情況下是foo 3.爲了進一步測試，我做了這個：

for (var key in fooList) 
    { 
     console.log(key); 
     console.log(fooList[key].getText()); 
     console.log(fooList[key].getContainer()); 
    } 

這導致了這個被記錄在Firebug控制檯（只顯示它第FOO）：

foo1 
Foo 1 
<span> 

當我點擊跨度，然後在Firebug，它指向跨越的第三而非第一或第二如預期。

任何想法我做錯了什麼？我是否需要爲跨度設置一個ID？

Answer 1

你舒爾在你的代碼中有var容器之前？

Answer 2

你在混合和匹配直接的JavaScript DOM操作和jQuery方法。不要這樣做。

如果您想使用jQuery將元素附加到另一個元素，請使用jQuery同時執行或不執行。因此，而不是

var container = document.createElement('span'); 

使用jQuery的版本：

var container = $("<span>"); 

當然，用添加HTML它的JQuery的方式：

container.html(text); 

等。

如果你真的繆斯使用document.createElement()，我想你可以逃脫：

$("#fooContainer").append($(container)); 

Answer 3

嘗試：

function Foo(text) 
{ 
    var container = document.createElement('span'); 
    container.innerHTML = text; 
    $("#fooContainer").append(container); 

    this.container = container 
    this.text = text 

    this.select = function() 
    { 
     $(this.container).addClass('selected'); 
    } 

    this.getContainer = function() 
    { 
     return this.container; 
    } 

    this.getText = function() 
    { 
     return this.text; 
    } 
} 

Answer 4

我認爲你對你提出的解決方案恰到好處。 我通常不會在Jquery上編寫代碼，但是對於我所瞭解的內容，$（）方法用於通過id引用對象，或者通過類引用對象數組。不知道通過傳遞DOM對象引用會發生什麼，但是在內部，一些瀏覽器在將新的DOM元素附加到子代時重新引用子對象。試試這個：

var foo_count = -1; 
function Foo(text) 
{ 
    foo_count++; 
    var id = foo_count; 

    var container = document.createElement('span'); 
    container.setAttribute('id', "foo_" + id); 
    container.innerHTML = text; 
    $("#fooContainer").append(container); 

    this.select = function() 
    { 
     $("#foo_" + id).addClass('selected'); 
    } 

    this.getContainer = function() 
    { 
     return $('#foo_' + id); 
    } 

    this.getText = function() 
    { 
     return text; 
    } 
}