1

This is the code for one of my javascript classes:

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;
   }
}

At each page load I do the following:

var fooList = {};

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

This results in the spans for each foo object being created correctly, resulting in this in the dom:

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

However, if I do this:

fooList['foo1'].select();

Then it results in this:

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

Rather than what's expected, which is this:

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

It seems like the container object of all foo objects points to the container of the last foo, which in this case is foo 3. To test it out further I did this:

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

This results in this being logged in firebug console (only showing it for the first foo):

foo1
Foo 1
<span>

When I click span, then in firebug, it points to the 3rd of the spans rather than the first or 2nd as expected.

Any ideas what I'm doing wrong? Do I need to set an id to the spans?

4

4 回答 4

3

你在你的代码中你var在容器之前有吗？

于 2012-04-28T11:47:56.437 回答
2

您正在混合和匹配直接的 javascript DOM 操作和 jQuery 方法。不要那样做。

如果您想使用 jQuery 将一个元素附加到另一个元素，请使用 jQuery 两者都做，或者都不做。所以而不是

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

使用 jQuery 的版本：

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

当然也可以使用 JQuery 向其中添加 html 的方式：

container.html(text);

等等。

如果你真的想使用document.createElement()，我认为你可以逃脱：

$("#fooContainer").append($(container));
于 2012-04-28T11:45:48.827 回答
1

我认为你对你提出的解决方案是正确的。我通常不写 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;
   }
}
于 2012-04-28T11:51:08.903 回答
1

尝试：

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;
   }
}
于 2012-04-28T11:47:41.790 回答