0

動的に作成された要素に追加されたイベントの関数呼び出しに配列の値を入れるのに問題があります。

したがって、正常に機能するハードコードされたバージョンは次のとおりです。

var parent_item = document.getElementById("developers_container");

var part = document.createElement('div');
part.id = "developer_A";
part.name = "developer_A";
part.className = "developer_block_un";
part.onmouseover = function() { hilight_dev('A',true)};
part.onmouseout = function() { hilight_dev('A',false)};
parent_item.appendChild(part);

var parent_item = document.getElementById("developer_A");

var part = document.createElement('span');
part.id = "developer_title_A";
part.name = "developer_title_A";
part.className = "developer_un";
part.innerHTML = "John Doe";
part.onclick = function() { select_dev('A')};
parent_item.appendChild(part);

基本的に、これは選択するユーザーのリストを作成します。各ユーザーのリストには、mouseover、mouseoff、およびonclickイベントがあります。上記のコードの要点は、現在すべてのユーザーに対して複製されています。

複製を配列ベースの関数に置き換えたい：

var dev_id = new Array();
var dev_fn = new Array();
var dev_ln = new Array();

document.getElementById("developers_container").innerHTML = "";

dev_id[0] = "A";
dev_fn[0] = "John";
dev_ln[0] = "Doe";

dev_id[1] = "B";
dev_fn[1] = "John";
dev_ln[1] = "Smith";

dev_id[2] = "C";
dev_fn[2] = "John";
dev_ln[2] = "Jones";

dev_id[3] = "D";
dev_fn[3] = "John";
dev_ln[3] = "Yougetthepoint";

document.getElementById("developers_container").innerHTML = "";

for(var i = 0; i < dev_id.length; i++) 
{
    var parent_item = document.getElementById("developers_container");

    var part = document.createElement('div');
    part.id = "developer_"+dev_id[i];
    part.name = "developer_"+dev_id[i];
    part.className = "developer_block_un";
    part.onmouseover = function() { hilight_dev(dev_id[i],true)};
    part.onmouseout = function() { hilight_dev(dev_id[i],false)};
    parent_item.appendChild(part);

    var parent_item = document.getElementById("developer_"+dev_id[i]);

    var part = document.createElement('span');
    part.id = "developer_title_"+dev_id[i];
    part.name = "developer_title_"+dev_id[i];
    part.className = "developer_un";
    part.innerHTML = dev_fn[i]+"<BR>"+dev_ln[i];
    part.onclick = function() { select_dev(dev_id[i])};
    parent_item.appendChild(part);
}

追加されたイベントを除いて、そのすべてが正常に機能しています。関数コード内で「dev_id[i]」が使用されている場合（「part.onmouseover = function（）{hilight_dev（dev_id [i]、true）};」のように）、何も実行されていないようです。イベントが発生し、関数が呼び出されますが、渡される変数は、本来あるべきユーザーのIDではなく、「未定義」として渡されます。

ここの誰かがこれを機能させる方法を知っていることを願っています。グーグルはあまり役に立ちませんでした、そしてこれは私が理解しようとして半日かかるそれらのばかげた小さな問題の1つです。ありとあらゆる助けを大いに感謝します。

ありがとう

4

1 に答える 1

1 

part.onmouseover = function(i) { 
  return function() { hilight_dev(dev_id[i],true) }
}(i)

ループ内にある変数iは、関数が呼び出された時点では未定義です。その値を維持するには、変数を閉じる必要があります。これに関する詳細な説明については、Douglas Crockfordによる「JavaScript、GoodParts」を参照してください。

エラー..ニールのコメントの後..はい..私は未定義ではありません..それは常にdev_idの長さになります..いずれにせよ、それはopが望んでいるものではありません:)

于 2013-01-30T21:31:35.567 に答える