javascript - 如何根据文本框的输入在div中生成一系列图像

Question

我正在尝试找到解决我目前遇到的问题的好方法，我正在尝试提高我对 javascript atm 的理解。

我的问题是尝试生成一系列图像，这些图像直接根据用户在文本框中输入的内容生成。

例如，如果我将“Hello”放入文本框中，我想在显示的 div 中按行生成 5 个图像，以显示如何用手指拼写“Hello”的特定方式，但需要知道如何分隔每个字符并生成图像与每个 Angular 色个人直接相关。

然后它将被生成为包含 5 个单独图像的 div，这些图像放置在一起并显示。

帮助将不胜感激!

Answer 1

只需连接 .change() 然后你可以使用 $.each() 迭代字符串中的每个字符，然后调用 .append() 添加到您的 <img/> <div/>或其他元素。

$("#spell").change(function(){
    var $o = $("#output").empty();
    $.each($(this).val(), function(i, c){
        $o.append("<img src='http://dummyimage.com/50x50/000/fff&text=" + c + "'/>");
    });
});

<强> Code example on jsfiddle

如果您希望在他们键入时发生这种情况，您可以使用 .keyup()