从输入字段的文本触发图像创建答案

【问题标题】：Trigger Image Creation from Input field's text从输入字段的文本触发图像创建
【发布时间】：2011-08-24 05:28:18
【问题描述】：

用户在输入字段中键入单词，单击“开始”按钮后，文件名与关键字匹配的小图像会在层次结构中的某个位置弹出。我只是希望有人仔细检查这个脚本，看看它是否有任何错误，因为它似乎不起作用。输入是一个逗号分隔的列表，因此是修剪。

$(".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，他为我制定了这个脚本。

【问题讨论】：

标签： jquery arrays loops append

【解决方案1】：

条件好像有几个错别字

i > words.length()

这永远不会是真的，length 是一个属性。应该是：

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

【讨论】：

不确定 +1 的用途，它不会起作用。 length 是一个属性，而不是一个函数。看我的回答。
谢谢。我自己也错过了。

【解决方案2】：

Here's a working demo 进行了各种改进。

您的代码不起作用的原因是：

i > words.length() 将始终为 false，因为您最初将其设置为 0，这需要为 <。
length 是一个属性，而不是一个函数。去掉括号。
附加新img 的语法元素只是附加一个字符串 '图片'。为了使用append() 来追加这样的新元素，您需要使用带有函数的重载。
严格来说不是错误，但有很多那里有不必要的代码。 split() 已经返回一个数组，所以循环通过那个数组把每个数组另一个数组中的元素是多余的。也没有理由之前新建 words 数组分配它。
没有特别的理由使用 live() 如果你不是动态的添加具有go 类的元素。你可以简单地使用click()

编辑：
作为对 cmets 的回答，这里是 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!)

【讨论】：

@Town - 感谢工作演示！，我确实需要它才能上线，所以我做了那个调整。起初它不起作用，但后来我看到你的小提琴使用的是 1.6，所以我更新了我的（1.5.2）。如果我想检查单词数组中任何条目的内容以获取特定的字符串值，有没有办法可以做到这一点？如果输入是 X、Y 或 Z，则目标 #Place 会有所不同。
@Jason：它应该可以在 1.5.2 上正常工作......无论如何它都可以与 jsfiddle 一起工作。您当然可以在循环中检查words[i] 的内容，可能使用switch statement，然后在调用append() 时设置一个变量来代替#place。这取决于你有多少不同的排列。
@Town：我很难设置 switch 语句，因为我对数组不是很熟悉。如果我想检查 words[i] 是否是“a、b、c、d 或 e”，如果是，请将返回目标设置为特定位置，我该怎么做？我应该为此提出一个新问题吗？
@Jason：这取决于匹配的复杂程度以及您想要添加图像的不同元素的数量。对于您在那里描述的那种情况，我会做this。我已经评论了它，所以它更清楚一点。
@Town ：我明白你的意思，在这种情况下，有 4 个可能的目标位置。比方说，一种用于小写，一种用于大写，一种用于数字，一种用于符号。很抱歉打扰您，但我非常感谢您的帮助。

【解决方案3】：

是的，这里肯定是一个错字。这是一个很好的指南，纠正了错字，可以帮助您编写脚本：http://jsfiddle.net/vkSQy/

【讨论】：