Question

我正在尝试根据用户输入输出单词的图片，我想知道是否有办法通过循环数组并将图像元素的HTML连接到src的设置为相应的图像？< / p>

    //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>

Answer 1

您可以使用以下代码 - 这会为每个字母生成html img标记，然后将这些标记注入DOM元素（例如，假设您有一个id为“output”的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/

循环遍历数组并将图像元素的HTML与其src连接起来

1 个答案: