Question

我编写了JS函数，它必须根据数组中的值绑定它生成的按钮。但它给了我最后的价值。我读到我必须使用闭包，我做了，我仍然无法正确绑定它们！我还是个初学者我读到关闭，我有了想法，但仍然不知道我错过了什么

function addNewServices(newServicesArray){
    var j=0; var x;
    for (i in newServicesArray){
        var html='';

        html='<div style="width: 33%; float: leftt"><a href="#" data-role="button" data-icon="home" id="btn-'+newServicesArray[j].servicename+'" value="'+newServicesArray[j].servicename+'" class="ui-btn-up-c">'+newServicesArray[j].servicename+'</a></div>';
        $("#main-menu").append(html);


        $('#btn-'+newServicesArray[j].servicename).bind('click', function (){bindThis(j)});
        j++;
    }

    var bindThis = function( j ) {
        return function() {
            alert(j); // gives 2 always
            alert( newServicesArray[j].servicename ); 
        };
    };
}

Answer 1

因为你有

function (){bindThis(j)}

当j的值为2时，稍后会调用它。

你只需要

bindThis(j)

使用不同的值调用

Answer 2

你不必在循环中绑定点击...你可以在函数中通过$(this)获得点击的参考..

让它尽可能简单..

function addNewServices(newServicesArray){
   var j=0; 
   for (i in newServicesArray){
      var html='';

      html='<div style="width: 33%; float: left"><a href="#" data-role="button" data-icon="home" id="btn-'+newServicesArray[j].servicename+'" value="'+newServicesArray[j].servicename+'" class="ui-btn-up-c">'+newServicesArray[j].servicename+'</a></div>';

      $("#main-menu").append(html);


   }
}

$(function(){
  $(document).on('click','a[id^="btn-"]',function (){
      var $this = $(this);
      alert($this.attr('value')); 
  });
});

Answer 3

闭包只是函数从外部作用域访问变量的方式。这里的关键词是变量 - 变量可能会发生变化，如果您之后访问它（在点击时），您将访问它的更高版本。

所以无论如何你需要存储j与j按钮的关联。感谢jQuery，bind方法已经为此提供了一个工具：它的second parameter，eventData是一些将传递给事件处理函数的用户数据。

所以，改变这个：

(..).bind('click',function (){bindThis(j)});

到此：

(..).bind('click', j, bindThis);

......应该*工作。请注意，我们不需要创建任何包装函数。我们只是将bindThis函数本身传递给bind，并告诉bind在调用它时它会将j传递给它。

（*） - 尚未测试

不能正确使用Closure

3 个答案: