jQuery：附加表单中的字符串值

Question

Bonjour，我正在处理一个具有以下场景的 jQuery 项目：

1/ 着陆页上有 3 个表单供用户输入 3 个不同的名称。
2/ 当用户在任何 #form 中输入名称 (#term1/term2/term3) 时，将出现关联的图像。
输入名称的顺序不应受到限制。
例如。如果用户在其中一个表单中输入 "Karen"，将打印名称 "Karen" 并打印关联的图像。如果用户输入 "Baby Kevin"，名称 "Baby Kevin" 将打印在 "Karen" 旁边（最好用逗号分隔名称），并且关联的图像将添加到上一张图像的旁边。

我遇到了一个问题：

输入名称时，它会打印所有表单的整个字符串，而不是附加它。

例如。如果我之前输入了"Wallace"，当我在另一个#form中输入"Karen"时，它会打印"WallaceWallaceKaren".
如果我提交 #form 和 #button，关联的图片将不会显示。

$(document).ready(function () {
    $("#info").hide();

    var displayContent = function () {
        $("#info").show();
        var content1 = $('#term1').val();
        content1 = content1.toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        var content2 = $('#term2').val();
        content2 = content2.toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        var content3 = $('#term3').val();
        content3 = content3.toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });

        var name1 = content1;
        var $nameText1 = $("#name"),
            str = name1;
        html = $.parseHTML(str),
        nodeNames = [];
        $nameText1.append(html);

        var name2 = content2;
        var $nameText2 = $("#name"),
            str = name2;
        html = $.parseHTML(str),
        nodeNames = [];
        $nameText2.append(html);

        var name3 = content3;
        var $nameText3 = $("#name"),
            str = name3;
        html = $.parseHTML(str),
        nodeNames = [];
        $nameText3.append(html);
    }

    $('#search').click(displayContent);
    $('#term1').keypress(function (event) {
        if (event.which == 13) {
            displayContent();
            $('#figure').prepend('<img src = "http://placebear.com/100/100" />');
        }
    });
    $('#term2').keypress(function (event) {
        if (event.which == 13) {
            $('#figure').prepend('<img src = "http://placebear.com/80/80" />');
            displayContent();
        }
    });
    $('#term3').keypress(function (event) {
        if (event.which == 13) {
            $('#figure').prepend('<img src = "http://placebear.com/50/50" />');
            displayContent();
        }
    });
});

#content {
    width: 400px;
    height: 100px;
}
#figure {
    position: fixed;
    margin-left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="form">
    <section id="fetch">
        <input type="text" placeholder="Please enter your name here" id="term1" />
        <button type="button" id="search">OK</button>
        <input type="text" placeholder="Please enter your name here" id="term2" />
        <button type="button" id="search">OK</button>
        <input type="text" placeholder="Please enter your name here" id="term3" />
        <button type="button" id="search">OK</button>
    </section>
    <section id="info">
        <h4>Take a look inside with:</h4>
        <section id="content">
            <h5 id="name"></div>
            <div id="figure"></div>
        </section>
 </section>
</section>

fiddle

Answer 1

而不是附加使用 $("#term2").val($("#term2").val()+"newValue")

Answer 2

我清除了您的代码，现在它可以正常工作了。你可以试试看。

$(document).ready(function(){
    $("#info").hide();
    var displayContent = function(){
        $("#info").show();
        var str = [],
            imgs = ["http://placebear.com/100/100","http://placebear.com/101/101","http://placebear.com/102/102"];
        $("#fetch input[type=text]").each(function(i){
            var v = $(this).val();
            if(v != ""){
                str.push(v.toUpperCase());
                if($("#figure").find("#image_"+i).length == 0){
                    $('#figure').prepend('<img src="' + imgs[i] + '" id="image_'+i+'" />');
                }
           }else{
               $("#figure").find("#image_"+i).remove();
           }
        })
      $("#name").html(str.join(", "));
   }

   $('#search').click(displayContent); 
   $("#fetch input[type=text]").keypress(function(event){       
       if(event.which == 13){
            displayContent();
        }
    });
});

加上你的 html 有问题 <h5 id="name"></div> 应该是 <h5 id="name"></h5>

这里是fiddlehttps://jsfiddle.net/f9m65to6/1/

jQuery：附加表单中的字符串值

jQuery: Append string values from forms

javascript

jquery

append