jQuery的：从追加形式

Question

卓悦，我在一个jQuery项目正与以下情形字符串值：

1 /有目标网页上3种形式供用户进入3个不同的名称。
2 /当用户在#form中的任何一个中输入名称（#term1/term2/term3）时，将出现相关图像。
输入名称的顺序不应受到限制。
例如，如果用户在其中一个表格中输入“Karen”，则会打印名称“Karen”并打印相关图像。如果用户输入“Baby Kevin”，名字“Baby Kevin”将打印在“Karen”旁边（最好用逗号分隔名字），相关图片将被添加到前一张图片的旁边。

我曾经遇到过一个问题，即：

1. 当被输入一个名称，它将打印所有formsrather整串不是追加它。

   例如，如果我之前已经进入了“华莱士”，并且当我在另一个#form之后输入“Karen”时，它会打印出“WallaceWallaceKaren”。

2. 如果我将#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> 
 
\t </section> 
 
</section>

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

而不是追加使用$（ “＃词条2”）。VAL（$（ “＃词条2”）。VAL（）+ “NEWVALUE” ）