Question

Bonjour，我正在开发一个jQuery项目，其中包含以下场景：

1 /登录页面上有3个表单供用户输入3个不同的名称。
2 /当用户在#term1中的任何一个中输入名称（term2 / term3 / #form）时，将显示相关联的图像。
不应限制输入名称的顺序。
例如。如果用户输入＆＃34; Karen＆＃34;其中一种形式，名称＆＃34; Karen＆＃34;将打印并打印相关图像。如果用户输入＆＃34; Baby Kevin＆＃34;，名称＆＃34; Baby Kevin＆＃34;将被打印在＆＃34; Karen＆＃34; （理想情况下用逗号分隔名称）和相关图像将添加到上一个图像旁边。

我遇到了一个问题：

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

EG。如果我已进入＆＃34; Wallace＆＃34;以前，当我进入＆＃34; Karen＆＃34;在另一个#form之后，它将打印＆＃34; WallaceWallaceKaren＆＃34;。
如果我使用#form提交#button，相关图片就不会显示。

＆＃13;

$(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();
        }
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

fiddle

Answer 1

我清除了您的代码并立即开始工作。你可以尝试一下。

$(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>

这是小提琴https://jsfiddle.net/f9m65to6/1/

Answer 2

而不是追加使用$（“＃term2”）。val（$（“＃term2”）。val（）+“newValue”）

jQuery：从表单

2 个答案: