2010-08-09 74 views
0

創建動態li元素:結合不同功能剛剛創建li元素

<ul> 
<li id="1">1</li> 
<li id="2">2</li> 
<li id="3">3</li> 
[...] 
</ul> 

li_id是一個數組值返回立ID(= 1,2,3 ...)

如何能我結合不同的功能,以每li元素在這樣的代碼:

for (li_id in lids) 
{ 
console.log(li_id);       
$(li_id).bind('mouseover', function() { 
console.log(li_id); 
}); 
} 

以上不起作用。如何正確寫入?

隨着live()代替bind()它顯示lids數組的最後一個元素的id,不1,2,3 ... [...],像console.log()$語句外部...

回答

1
鑑於你的HTML

http://www.mennovanslooten.nl/blog/post/62

JavaScript closure inside loops – simple practical example

,代碼可以寫在兩個方面。

使用jQuery 1.4 Event.data參數:

var lids = [1,2,3]; 
for (i in lids) { 
    var li_id = lids[i]; 

    $('#' + li_id).bind('mouseover', { id: li_id }, function(ev) { 
     console.log(ev.data.id); 
    }); 
} 

或者創建具有匿名函數閉包:

var lids = [1,2,3]; 
for (i in lids) { 
    var li_id = lids[i]; 

    // an anonymous function 
    (function (id) { 
     $('#' + id).bind('mouseover', function() { 
      console.log(id); 
     });   
    })(li_id); // ...called every time with different id 

} 

我更喜歡在這種情況下jQuery Event.data方式。

+0

THX!我認爲那就是我一直在尋找的東西。但是,你能告訴我如何實現這個到我的代碼:)? – domi 2010-08-09 22:10:20

+0

我添加了示例代碼。 – 2010-08-10 08:02:31

0

因此,與封閉的正確答案應該是:

$(li_id).bind('mouseover', function(val) { 
          return function() { 
           console.log(val); 
          } 
          }(li_id)); 

但這只是需要如果你需要循環的值傳遞到函數。

+0

選擇器是小問題。僅僅是一個錯字。關閉問題更嚴重。 – 2010-08-09 20:39:31

+0

感謝Marko,其實我現在看到了。我已經多次摔跤過,所以這對我也有幫助。謝謝! – Joshua 2010-08-09 20:50:08