0

このコードでは、要素内の各<area>タグにロールオーバー効果をバインドすることになっています。<map>

function initLinks(webrt) {
  var areas = document.querySelectorAll("map#streetmap > area");
  var links = new Array(areas.length);
  for (var i=0; i<links.length; i++) {
    links[i] = new Image(786,272);
    links[i].src = webrt+"templates/default/sketches/links"+(i+1)+".png";
    areas[i].onmouseover=function(){switchLinkImg(webrt+"templates/default/sketches/links"+(i+1)+".png");};
    areas[i].onmouseout=function(){switchLinkImg(webrt+"templates/default/sketches/links.png");};
  }
}

奇妙なことに、各<area>onmouseover イベントは、存在しないイメージを読み込もうとします: /templates/default/sketches/links6.png. i関数に渡す文字列を取得するのではなく、6 にインクリメントされたこの変数をグローバル変数として保持するのはなぜですか?

これを修正するにはどうすればよいですか?

注: jQuery はありません。

4

2 に答える 2

2

インデックスを使用するときに配列メソッドを使用する方がきれいであることがよくあります。これは、追加のラッパーが必要なく、すべてが少しきれいに読み取れるためです（私見）：

function initLinks(webrt) {
    [].forEach.call(document.querySelectorAll("map#streetmap > area"), 
        function(elm, index){
            var img = new Image(786,272);
            img.src = webrt+"templates/default/sketches/links"+(index+1)+".png";
            elm.onmouseover=function(){switchLinkImg(webrt+"templates/default/sketches/links"+(index+1)+".png");};
            elm.onmouseout=function(){switchLinkImg(webrt+"templates/default/sketches/links.png");};
    });
}

変数カウントは大幅に減少し、「ループ」の各反復で余分な新しい関数を作成しないことで、余分な RAM を大量に消費するクロージャーを回避します。

確かに、どちらの方法でも機能しますが、新しい配列メソッドでは、プロシージャを forEach() 呼び出しからリッピングして名前を付けることで、プロシージャを再利用することもできます。

于 2013-10-06T20:40:49.350 に答える