從輸入字段的文本中觸發圖像創建

用戶在單擊Go按鈕後，將單詞輸入到輸入字段中，文件名與匹配關鍵字的小圖像在層次結構中的特定位置彈出。我只是希望有人仔細檢查這個腳本，看看它是否有錯誤，因爲它看起來不起作用。輸入是一個逗號分隔列表，因此修剪。從輸入字段的文本中觸發圖像創建

$(".Go").live('click', function(){ 
    var words = []; 
    jQuery.each(jQuery.trim(jQuery("#input").val()).split(","), function(index, value){ 
     words.push(jQuery.trim(value)); 
    }); 

    for(i=0; i > words.length(); i++){ 
     $('#Place').append('img').attr("src", words[i]+'.png'); 
    } 
});

非常感謝Femi，他爲我制定了這個劇本。

來源

2011-05-12 C_K

Here's a working demo有各種改進。

您的代碼將無法正常工作的原因是：

i > words.length()將永遠是假的你最初將其設置爲0，需要被<。
length是屬性，而不是函數。刪除括號。
添加新的img 元素的語法只是附加一個 'img'的字符串。爲了使用append()來追加一個新的元素，你需要使用帶有函數的重載。
不是嚴格的錯誤，但有很多在那裏不必要的代碼。 split() 已經返回數組，因此通過該數組循環將每個數組元素轉換爲另一個數組是冗餘。也沒有理由分配它之前陣列新。
還有，如果你不是動態一類的go添加元素沒有特別的理由使用 live()。您可以簡單地使用click() 代替。

編輯：
在回答意見，這裏是如何add the images to two different containers based on the word。

編輯2：
和add the image to a different container based on whether the 'word' is upper case, lower case, numbers or symbols (ie: none of the above!)

來源

2011-05-12 15:26:06 Town

@Town - 感謝您的演示！我確實需要它來生活，所以我做了調整。它一開始不工作，但後來我看到你的小提琴使用1.6，所以我更新了我的（1.5.2）。如果我想檢查單詞數組中任何條目的內容以獲取特定的字符串值，有沒有辦法做到這一點？如果輸入是X，Y或Z，那麼目標#Place是不同的。 – 2011-05-12 16:29:16

@Jason：它應該可以在1.5.2下正常工作......無論如何它都可以使用jsfiddle。你當然可以使用[switch語句]（https://developer.mozilla.org/en/JavaScript/Reference/Statements/switch）檢查循環內的單詞[i]'的內容，然後設置一個變量在調用append（）時使用'＃place'。這取決於你有多少不同的排列。 – Town 2011-05-12 16:35:48

@Town：我很難設置switch語句，因爲我對數組不熟悉。如果我想檢查單詞[i]是'a，b，c，d還是e'，並且如果是，請將回報目標設置爲特定地點，我該怎麼做？我應該爲此提出一個新問題嗎？ – 2011-05-13 16:16:29

貌似條件有幾個錯別字

i > words.length()

這不會是真實length是一個屬性。應該是：

for(i=0; i < words.length; i++)

來源

2011-05-12 15:20:33

不知道這是什麼+1，它不會工作。 'length'是一個屬性，而不是一個函數。看到我的答案。 – Town 2011-05-12 15:36:18

謝謝。錯過了那個人。 – 2011-05-12 15:43:57

是的，絕對是一個錯字那裏。這裏有一個很好的指導，他們錯字更正，以幫助您與您的腳本一起：http://jsfiddle.net/vkSQy/

來源

2011-05-12 15:37:22

從輸入字段的文本中觸發圖像創建

回答

相關問題