javascript类中的神秘bug

这是我的一个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

对象的跨度，从而在dom中产生以下结果：

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

那么它的结果是：

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

这将导致该文件被登录到firebug控制台（仅在第一个foo中显示）：

foo1
富1

当我单击“跨度”时，在firebug中，它指向第三个跨度，而不是预期的第一个或第二个跨度

---

知道我做错了什么吗？我需要为跨度设置一个id吗？

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

如果要使用jQuery将一个元素附加到另一个元素，请使用jQuery同时执行这两项操作，或者两者都不执行。所以不是

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

使用jQuery的版本：

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

等等

如果您真的想使用

document.createElement（）

，我认为您可以：

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

---

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

如果要使用jQuery将一个元素附加到另一个元素，请使用jQuery同时执行这两项操作，或者两者都不执行。所以不是

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

使用jQuery的版本：

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

等等

如果您真的想使用

document.createElement（）

，我认为您可以：

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

尝试：

尝试：

---

您是舒尔公司的代码中容器前面有

var

吗？

您是舒尔公司的代码中容器前面有

var

吗？

我认为您提出的解决方案是正确的。 我通常不会写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;
   }
}

---

我认为你提出的解决方案是正确的。 我通常不会写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;
   }
}

---

这真的是关于

document.createElement

？它似乎正确地完成了它的工作（创建元素）。我将您的代码输入到JSFIDLE，您的代码在其中运行良好。“容器”取自select中的构造函数范围，并且始终与上次创建的对象的容器匹配所有其他对象。您是否认为在您的代码中，在容器之前有

var

？哈哈，@jcubic被窃听了。总是使用jslint或jshint来避免这些打字错误。这真的是关于

document.createElement

？它似乎正确地完成了它的工作（创建元素）。我将您的代码输入到JSFIDLE，您的代码在其中运行良好。“容器”取自select中的构造函数范围，并且始终与上次创建的对象的容器匹配所有其他对象。您是否认为在您的代码中，在容器之前有

var

？哈哈，@jcubic被窃听了。始终使用jslint或jshint来避免这些输入错误。

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

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