Question

这种方式不起作用（元素从函数中拉入）。

    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。

目前，我无法获取错误代码，但只有一对正在初始化......然后EffectsFont无效。

Jshint警告不要在循环中创建函数但我不明白为什么？有什么问题？

Answer 1

你有一个关闭问题。处理程序对变量label进行闭包。但是，当循环结束时，label将是最后一个元素 - 所有处理程序将label视为它们触发时的最后一个元素。

Answer 2

我称之为冻结闭包变量，基本上是通过使用自调用函数创建一个不共享的新闭包。

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);
}

调用事件监听器 - 两种方式之一有效，有什么区别？

2 个答案: