數組的索引默認爲最後一次迭代

我有一個數組定義並將其附加到字符串字段以動態編寫HTML TR。我已經命名了一系列與數組中字符串值相同名稱的JPEG，以便我可以動態地打印字符串名稱及其關聯圖像。我的問題是，我想添加一個onclick事件到圖像並傳遞一個與表格行打印的名稱相同的javascript函數。圖像和字符串正確迭代，但傳遞給每個錶行的JavaScript函數的值默認爲最後一個數組項？我嘗試了多種場景，但不明白爲什麼同樣的storyWords [index]在用來選擇正確的JPEG文件並打印出正確的名稱時不起作用。數組的索引默認爲最後一次迭代

<script type="text/javascript"> 
var storyWords = ""; 
var index; 
var strWord =""; 

function doStuff(word){ 
alert(word);  

}; 
$(document).ready(function(){ 


var storyId = localStorage.getItem("StoryId"); 
var strHTML = "<table>"; 
if (storyId == "1"){ 
    storyWords = ["Ant", "Bananas", "Bottle", "Car", "Castle"]; 
} 
else if (storyId == "2"){ 
    storyWords = ["Dragons", "Football", "Hollow", "Hospital", "Island"]; 
} 
else if (storyId == "3"){ 
    storyWords = ["Log", "Party", "Mountain", "Poles", "Princess"]; 
} 
else{ 
    storyWords = ["Trophy"]; 
} 


for (index = 0; index < storyWords.length; index++){ 
    strWord = storyWords[index]; 
    strHTML += "<tr><td><img src=img/Words/" + storyWords[index] + ".jpg onclick=doStuff("+ storyWords[index] +");>&nbsp;&nbsp;" + storyWords[index] + "</td></tr>"; 
} 

$('#wordText').html(strHTML + "</table>"); 

}); 
</script>

感謝您的幫助！

來源

2014-09-02 BlackBerry Special

我不知道你想達到什麼（小提琴會很好），但我現在看到的是，你從來沒有設置'localStorage'「StoryId」變量，因此'if ... else if ... else'將總是以'else'（Trophy）結尾。 – lesssugar 2014-09-02 22:10:44

函數正在傳遞數組的最後一個元素，即使每個行都在索引更改時打印正確的元素名稱和指定的jpeg。 – 2014-09-02 23:31:15

我在Google Chrome開發人員工具中進行測試時手動設置了storyid。 – 2014-09-02 23:33:24

只是改寫了您的功能位，創造了Fiddle

$(document).ready(function() { 
    function doStuff(word) { 
    alert(word); 
    } 
    var storyId = 3; // just set static storyId 3 as example 
    var table = $('<table>'); 
    if (storyId == "1") { 
    storyWords = ["Ant", "Bananas", "Bottle", "Car", "Castle"]; 
    } 
    else if (storyId == "2") { 
    storyWords = ["Dragons", "Football", "Hollow", "Hospital", "Island"]; 
    } 
    else if (storyId == "3") { 
    storyWords = ["Log", "Party", "Mountain", "Poles", "Princess"]; 
    } 
    else { 
    storyWords = ["Trophy"]; 
    } 


for (index = 0; index < storyWords.length; index++) { 

    (function (story) { 
     strImg = ""; 
     var tr = $('<tr>'); 
     var td = $('<td>'); 
     var img = $('<img>'); 
     img.attr('src', 'img/Words/' + story + '.jpg'); 
     img.click(function() { 
      doStuff(story); 
     }) 
     img.appendTo(td); 
     td.append(" " + story); 
     td.appendTo(tr); 
     tr.appendTo(table); 
    })(storyWords[index]); 
    } 
    $("#wordText").append(table); 
});

HTML：

<div id="wordText"></div>

我調整了行，列的創建/追加，等了一下，而不是寫入整個包括表格閉合標籤作爲一個變量。只是一個建議，因爲我更習慣於這樣寫。希望這對你有任何用處，雖然它是一種不同的方法:)

來源

2014-09-02 23:48:17

這不是變量的範圍。這是關於封閉捕獲外部變量的方式。 OP是按值來做的，JavaScript是通過引用來實現的。 – 2014-09-02 23:52:21

@TheParamagneticCroissant Thx的輸入，不知道這一點，並會明天再次檢查，因爲它在這裏很晚。剛進入錯誤的假設，但至少把一些東西一起工作（雖然它可能會稍微過度:)） – 2014-09-02 23:56:16

超級！就是這樣。 – 2014-09-03 00:28:07

數組的索引默認爲最後一次迭代

回答

相關問題