javascript - ループ内の関数をクリックして、すべての変数を送信しない

Question

私は過去 2 日間、これに対する解決策を見つけるために多くの時間を費やしてきましたが、私の経験不足が邪魔をしています。

イメージ マップ リソースを開発しています。ユーザーが、動的 URL を含むモーダル ウィンドウを開きます。私のコードからわかるように、さまざまな ID (正しい結果) をスローするアラートをテストしましたが、同じことが URL ウィンドウには当てはまりません。アラートポップアップのように2つではなく、1つのURL変数しか取得していません。

私はそれが構造的なものだと確信していますが、どんなポインタでもいただければ幸いです。

function tree(tree_id, mappos) {
    this.tree_id = tree_id;
    this.mappos = mappos;
}

var mytreelist = [];
mytreelist[0] = new tree(18, "708,290,736,319"),
mytreelist[1] = new tree(272, "134,143,163,172");

for (i = 0; i < mytreelist.length; i++) {

    document.write("<div id = \"" + mytreelist[i].tree_id + "\" > <area class = \"maplink\"     
    shape= \"rect\" coords=\"" + mytreelist[i].mappos + "\" data-role=\"button\" href=\"#\" 
    id=\"" + mytreelist[i].tree_id + "\"/></div>");

    treeid = this.mytreelist[i].tree_id;

    $("#" + treeid).click(function() {
        var win = $("#window").data("kendoWindow");
        thing = this.id;
        alert("tree number " + thing);
        win.center();
        win.open();
    });
 }
    $(document).ready(function() {
        $("#window").kendoWindow({
            height: "400px",
            draggable: false,
            resizable: false,
            title: "Centered Window",
            modal: true,
            visible: false,
            width: "600px",
            content: "check.php?tree_id=" + treeid,
            title: "Async Window Content"
        });
    });

わかった。ここでアイデアを単純化し、エンクロージャー機能を使用しようとしています。私はまだ同じ問題を抱えています。配列要素の ID にはアクセスできますが、その値にはアクセスできません。

var mytreelist = ['elm', 'oak', 'pine'];

function create() {
    for (var i = 0; i < mytreelist.length; i++) {
    mytreelist[i] = function(tree) {
    var newtree = this.mytreelist.value; //this is not correct?
    return function() {

    alert("tree = " + newtree);

      };
  }(i);
 }
}

function run() {
  for (var i = 0; i < 5; i++) {
  mytreelist[i]();
  }
}

create();
run();