2014-03-28 190 views
0

所以這兩個做工精細:爲什麼我不能設置批量事件處理程序?

$(document).on("click", "#_something", function(){ 
    $('#vid').attr('src',video_config["something"].video); 

}); 
$(document).on("click", "#_anotherthing", function(){ 
    $('#vid').attr('src',video_config["anotherthing"].video); 

}); 

然而,somethingnothing是對象我做的屬性,所以我試圖做到這一點:

for (var key in video_list){ 
    $(document).on("click", "#_"+key, function(){ 
     $('#vid').attr('src',video_list[key].video); 
    }); 
} 

哪搞砸了排序,並將所有src值設置爲我擁有的最後一個video_list[key].video值。換個角度來說,這個分​​配的所有src屬性都是相同的值。

如何在不手動編寫每個事件處理程序的情況下正確執行此操作?

+2

使用類而不是ID的。 – blgt

+0

有多個#vid會搞砸 –

+0

你有多個具有相同ID的元素嗎?總的來說,這是非常令人沮喪的。 – guruprasath

回答

4

這是因爲您的處理程序函數捕獲key作用於父函數的變量。當你的Handler執行時,key有最後一個值。

修正是通過使用另一個函數作用域來捕獲每次迭代時的當前值。就像這樣: javascript closure in a for loop

在ES6瀏覽器,let是塊作用域,你可以使用它作爲一個快捷方式:

for (var k in video_list) { 
    function(key) { 
    // create your event handler here using key 
    }(k); 
} 

這是在這個問題上是基本相同的,因爲這一個解釋

for (let k in video_list) { 
    let key = k; 
    // same code as your question goes here, using key. 
} 
+0

'let'在大多數瀏覽器中不被支持 – blgt

+0

這就是爲什麼我在ES6瀏覽器_中說的原因。此外,_most_瀏覽器取決於您的目標受衆:它受IE11 +支持,至少FF24 +和至少Chrome 30+支持。對於那些ES6兼容性的東西,你可以看看Kangax兼容性表格:http://kangax.github.io/es5-compat-table/es6/#let – jods

+0

http://jsfiddle.net/jeuL7/ < - 給它一個走。我不斷收到語法錯誤。 – blgt

1

快速和骯髒的黑客:

for (var key in video_list){ 
    (function(key){// create a new context, so not all handlers point the the same key 
     $(document).on("click", "#_"+key, function(){ 
      $('#vidSrc').attr('src',video_list[key].video); 
     }); 
    })(key); 
} 

正確的方法:

$(document).on("click", ".some-new-class-you-just-defined", function() { 
    $(this).attr('src', video_list[$(this).attr('id').slice(1)].video); 
}); 

編輯:添加子字符串的id。像@jods建議的那樣,最好是有一些查找機制,而不是像ID一樣存儲。

+1

你的第二段代碼是不正確的,因爲'id'開始時是一個額外的下劃線'_'而不是原始的屬性名稱。如果你走這條路線,你應該把屬性名稱放在一個額外的屬性中,比如'data-videokey = something'。 – jods

+0

+1使用類不是循環 – Jasen

+0

@jods你是對的。在循環中,錯過了這一點。 – blgt

2

下面是使用一個事件處理程序,一類和數據屬性的簡單方法:

$(document).on("click", ".video", function(){ 
    var key = $(this).data("key"); // in the element add data-key="xyz" 
    $('#vid').attr('src',video_list[key].video); 
}); 
相關問題