0

この方法は機能しません（要素は関数内のwithからプルインされます）。

    function styleTwitter1( pair_array )
    {
        var i;
        var input;
        var label;
        var font_size;

        for ( i = 0; i < pair_array.length; i+=2 ) 
        {
/*
*/
            input = document.getElementById( pair_array[ i ] );
            label = document.getElementById( pair_array[ i + 1 ] );
/*
*/
            label.fontSize = window.getComputedStyle( label, null ).getPropertyValue("font-size");
/*
*/
            input.addEventListener( "keypress", function()
            { 
                label.style.opacity = 0; 
            }, false );
/*
*/
            input.addEventListener( "focus", function()
            { 
                if( input.value === '' )
                {
                    label.style.opacity = 0.2; 
                    input.style.border = '1px solid #888888'; 
                }
            } , false );
/*
*/
            input.addEventListener( "blur", function()
            {
                if( input.value === '' )
                {
                    label.style.opacity = 1;
                    new EffectsFont( label ).fade( 'up', 150 );
                    input.style.border = '1px solid #dddddd'; 
                }   
            } , false );
/*
*/
        }
    }

ただし、この方法では行われます（要素は関数の外部から注入されます）。

    function initTwitterStyle( input, label )
    {
/*
*/
        input.addEventListener( "keypress", function()
        { 
            label.style.opacity = 0; 
        }, false );
/*
*/
        input.addEventListener( "focus", function()
        { 
            if( input.value === '' )
            {
                label.style.opacity = 0.2; 
                input.style.border = '1px solid #888888'; 
            }
        }, false );
/*
*/
        input.addEventListener( "blur", function()
        {
            if( input.value === '' )
            {
                label.style.opacity = 1;
                new EffectsFont( label ).fade( 'up', 150 );
                input.style.border = '1px solid #dddddd'; 
            }

        }, false );
/*
*/
    }

違いがわからない場合は、配列ループを外側に引き出し、twitterStyle2に要素を挿入するだけです。

現在、エラーコードを取得できませんが、1つのペアのみが初期化されています。その後、EffectsFontが機能しません。

Jshintはループで関数を作成しないように警告していますが、理由がわかりません。どうした？

4

2 に答える 2

2

閉鎖の問題があります。ハンドラーは変数を閉じますlabel。ただし、ループが終了するまでlabelに、が最後の要素になります-すべてのハンドラーは、起動時に最後の要素として扱わlabelれます。

于 2012-05-19T23:04:40.173 に答える
0

基本的に、共有されない新しいクロージャを作成する自己呼び出し関数を使用して、クロージャ変数をフリーズすると呼びます。

var divs = [...];
for (var i=0; i < 10; i++) {
  // Here's the self calling function
  div.onclick = (function(i){
    return function() {
      console.log("Clicked div with index" + i);
    }
  })(i);// Passing the variable to the self calling function creating a new closure 
}

ただし、私の好みの方法は、https：//developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bindを使用することです。

var divs = [...];
for (var i=0; i < 10; i++) {
  div.onclick = (function(i) {
      console.log("Clicked div with index" + i + "and id" + this.id );
    }
  }).bind(div, i);
}
于 2012-05-19T23:10:09.980 に答える