javascriptクローズド使用:循環バインディング問題を解決する
5150 ワード
jsを使用してラベル一括バインディングイベントを使用する場合、ループダイナミックバインディングは一般的に使用されますが、バインディングイベントの場合は匿名関数を参照し、匿名関数でループされた変数を使用します.
これは、内部関数が外部変数を使用する際に、コピーではなく参照方式を使用しているためで、つまり私が各ノードにオンモスoverとオンモスoutイベントを設定すると、iの参照はマスター配列に伝達され、ノードをクリックして、オモスタビとオモウセットイベントをトリガすると、iの値はノード総数になります.
解決策はクローズドを使うことです.
問題の鍵は、子関数は親関数の局所変数を使用する必要があります.
解決策はクローズドを使うことです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div1" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m1" class="mask"/>
</div>
<hr>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div2" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m2" class="mask"/>
</div>
<hr>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div3" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m3" class="mask"/>
</div>
<script type="text/javascript">
var div = document.getElementsByClassName("img");
var mask = document.getElementsByClassName("mask");
for(var i=0;i<div.length;i++){
div[i].onmouseover = function()
{
mask[i].style.opacity = "1";
mask[i].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
}
div[i].onmouseout = function()
{
mask[i].style.opacity = "0";
mask[i].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"
}
}
</script>
</body>
</html>これは、内部関数が外部変数を使用する際に、コピーではなく参照方式を使用しているためで、つまり私が各ノードにオンモスoverとオンモスoutイベントを設定すると、iの参照はマスター配列に伝達され、ノードをクリックして、オモスタビとオモウセットイベントをトリガすると、iの値はノード総数になります.
解決策はクローズドを使うことです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div1" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m1" class="mask"/>
</div>
<hr>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div2" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m2" class="mask"/>
</div>
<hr>
<div style="width:208px;height:116px; border:0px solid #000; position:relative;" id="div3" class="img">
<img src="drfIMG.jpg" style="width:208px;height:116px;"/>
<img src="mask.png" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0;" id="m3" class="mask"/>
</div>
<script type="text/javascript">
var div = document.getElementsByClassName("img");
var mask = document.getElementsByClassName("mask");
for(var i=0;i<div.length;i++){
/*
， ： ， java ， 。 ， ， ， ， ， 。
*/
(function(){
var p = i;
div[p].onmouseover = function()
{
mask[p].style.opacity = "1";
mask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
}
div[p].onmouseout = function()
{
mask[p].style.opacity = "0";
mask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"
}
})();
}
</script>
</body>
</html>問題の鍵は、子関数は親関数の局所変数を使用する必要があります.
解決策はクローズドを使うことです.