1

これは私のjavascriptクラスの1つのコードです：

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>

ただし、これを行うと：

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>

containerすべてのオブジェクトのオブジェクトが最後のfooのコンテナー（この場合はfoo 3）を指しているようfooです。さらにテストするために、次のようにしました。

    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で、予想どおり1番目または2番目ではなく、3番目のスパンを指します。

私が間違っていることについて何か考えはありますか？スパンにIDを設定する必要がありますか？

4

4 に答える 4

3

あなたはあなたのコードであなたがvarコンテナの前に持っていることを確信していますか？

于 2012-04-28T11:47:56.437 に答える
2

ストレートなJavaScriptDOM操作とjQueryメソッドを組み合わせて一致させています。そうしないでください。

jQueryを使用して要素を別の要素に追加する場合は、jQueryを使用して両方を実行するか、どちらも実行しないでください。だから代わりに

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

jQueryのバージョンを使用します。

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

そしてもちろん、それにhtmlを追加するJQueryの方法を使用します。

container.html(text);

等々。

あなたが本当に使用をミューズするならdocument.createElement()、私はあなたが逃げることができると思います：

$("#fooContainer").append($(container));
于 2012-04-28T11:45:48.827 に答える
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 に答える
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 に答える