关于动态生成控件

小坤1005858885

1. Model.prototype.button26Click = function(event) {
   
2. 
   
3.                 for (var int = 0; int < 30; int++) {
   
4.                         var parentNode = this.getElementByXid("div1"); // window为新加button的父元素
   
5.                         if (parentNode) {
   
6.                                 var flag = {
   
7.                                         "xid" : "nbtn" + int,
   
8.                                         "label" : "按钮" + int,
   
9.                                         "parentNode" : parentNode,
   
10.                                         "class" : "btn btn btn-default",
    
11.                                         "id":int
    
12.                                 };
    
13.                                 var button = new Button(flag);
    
14.                                 button.on("onClick", function(event) {
    
15.                                         alert(flag.label);
    
16.                                 });
    
17.                         }
    
18.                 }
    
19.         };

复制代码

为什么生成完以后  这个按钮的事件内的   alert(flag.label);   返回的都是最后一个控件的??
有什么办法能处理一下吗??

liangyongfei

这是js作用域的问题！for循环和if中变量int是同一个，当int发生改变的时候，所有引用int变量的地方，值都会发生改变的！
你需要自定义作用域，比如你的代码可以写成这样：

• for (var int = 0; int < 30; int++) {
•                         var parentNode = this.getElementByXid("div1"); // window为新加button的父元素
•                         if (parentNode) {
•                                 （
•                                     var i = int;
•                                      var flag = {
•                                         "xid" : "nbtn" + i,
•                                         "label" : "按钮" + i,
•                                         "parentNode" : parentNode,
•                                         "class" : "btn btn btn-default",
•                                         "id":i
•                                 };
•                                 var button = new Button(flag);
•                                 button.on("onClick", function(event) {
•                                         alert(flag.label);
•                                 });
•                                 ）
•                         }
•                 }
  

小坤1005858885

liangyongfei 发表于 2015-12-2 09:35
这是js作用域的问题！for循环和if中变量int是同一个，当int发生改变的时候，所有引用int变量的地方，值都会 ...

哥们.照你这样加上括号以后       编译不过去呀...

liangyongfei

小坤1005858885 发表于 2015-12-2 10:47
哥们.照你这样加上括号以后       编译不过去呀...

好吧，刚刚只是个思路，完整的代买是：

1. define(function(require){
   
2.         var $ = require("jquery");
   
3.         var justep = require("$UI/system/lib/justep");
   
4.         var Button = require("$UI/system/components/justep/button/button");
   
5.        
   
6.         var Model = function(){
   
7.                 this.callParent();
   
8.         };
   
9.        
   
10.         Model.prototype.button26Click = function(event) {
    
11.                
    
12.                 for (var int = 0; int < 30; int++) {
    
13.                         var parentNode = this.getElementByXid("div1"); // window为新加button的父元素
    
14.                         (function(){
    
15.                                 var i = int;
    
16.                                 if (parentNode) {
    
17.                                  var flag = {
    
18.                                         "xid" : "nbtn" + int,
    
19.                                         "label" : "按钮" + int,
    
20.                                         "parentNode" : parentNode,
    
21.                                         "class" : "btn btn btn-default",
    
22.                                         "id":int
    
23.                                 };
    
24.                                 var button = new Button(flag);
    
25.                                 button.on("onClick", function(event) {
    
26.                                         alert(flag.label);
    
27.                                 });
    
28.                               
    
29.                               
    
30.                         }}());
    
31.                 }
    
32.         };
    
33. 
    
34.         return Model;
    
35. });

复制代码

小坤1005858885

liangyongfei 发表于 2015-12-2 11:17
好吧，刚刚只是个思路，完整的代买是：

谢啦 哥们.可以结贴了~