遍历一个数组并将图像元素的 HTML 与其 src 连接起来答案

【问题标题】：Loop through an array and concatenate the HTML for the image elements with its src's遍历一个数组并将图像元素的 HTML 与其 src 连接起来
【发布时间】：2015-04-23 12:35:00
【问题描述】：

我正在尝试根据用户输入输出文字图片，我想知道是否有办法通过循环遍历数组并将带有 src 设置的图像元素的 HTML 连接到相应的图像？

    //myArray
    var Signs = new Array("signa.jpg", "signb.jpg", "signc.jpg", "signd.jpg", "signe.jpg", "signf.jpg", "signg.jpg", "signh.jpg", "signi.jpg", "signj.jpg", "signk.jpg", "signl.jpg", "signm.jpg", "signn.jpg", "signo.jpg", "signp.jpg", "signq.jpg", "signr.jpg", "signs.jpg", "signt.jpg", "signu.jpg", "signv.jpg", "signw.jpg", "signx.jpg", "signy.jpg", "signz.jpg");


    $(document).ready(function () {

        $("#btnGet").click(function () {

            var pattern = new RegExp(/^[a-zA-Z]+$/);
            var UserInput;

            UserInput = $('#txt_name').val();
            //splits input
            UserInput = UserInput.split("");
            //gets data from input
            var userFirstName = trim($("#txt_name").val());
            text = text.toLowerCase();           //put all text into lower case 


        });//end of txt_name 

    });//end of btnGet

    //Trim function from http://www.somacon.com/p355.php
    function trim(stringToTrim) {
        return stringToTrim.replace(/^\s+|\s+$/g, "");

    }

</script>

【问题讨论】：

你的问题不清楚。你有什么输入，想要的输出是什么，到目前为止你尝试了什么？即使它还没有工作，你也可以发布你的尝试
对不起，如果我不清楚；基本上页面应该做的是根据用户的输入输出标志图像。就像我输入“大卫”一样，应该会出现每个字母的图像，D、a、v、i 和 d 在手语图像中显示我的名字。

标签： javascript jquery arrays image loops

【解决方案1】：

您可以使用如下代码 - 这会为每个字母生成 html img 标签，然后将它们注入到 DOM 元素中（例如，假设您有一个 id 为“输出”的 div：

var imageTags = $('#txt_name').val().split('').map (function(c) {return '<img src="img' + c + '.png" />';}, '');
$("#output").html(imageTags.join(''));

这是一个示例 jsFiddle： http://jsfiddle.net/zdmmx49k/4/

【讨论】：