如何将img添加到使用Jquery输入时创建的每条消息？

Question

我无法弄清楚这一点。这可能是目前我无法处理的小事。我是这个初学者，对不起。

现在我的工作在此聊天，我每次按输入类的时间被用用户名和消息创建。

在用户名的左侧，我想把这个IMG轮廓，用户可以选择，或只使用为Default.png。

我希望图片在删除前保留在他名字的左侧。

下面是一些代码：

<script> 
    $("#message").keypress(function(e) { 

    var test = $("#Uname").val() 
    var valmsg = $('#message').val(); 
    var poza = $('<img src="http://dev.alurosu.com/bobo/chat/data/img/admin/default.png">'); 

    if(e.which == 13 && valmsg.trim() == ""){ 
      e.preventDefault(); 
      alert('Please type a message to send'); 
     } else if (e.which == 13) { 
      $("#chat").append("<div class='mesaj' >" + test + ':' + valmsg + "</div>"); 
      $("#chat").append(poza); 
      $('#message').val(''); 
      e.preventDefault(); 
     } 
    }); 
</script> 

这里是Jsfiddle但我不能上传的完整代码。

这里是一个截图为例

希望你能以某种方式向我解释。谢谢。

Answer 1

我假设你想让图像跟随用户名，所以你应该使用Prepend。

$（'div.mesaj'）。prepend（yourimage）;

确保图像路径正确。

Answer 2

else if (e.which == 13) { 
 
     var imgpath = '<img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-group-512.png" width="30px" height="30px" style="float:right">'; 
 
      $("#chat").append("<div class='mesaj' >" + test + ':' + valmsg + imgpath +"</div>"); 
 
      $('#message').val(''); 
 
     }

使用此代码..

Answer 3

$（文件）。就绪（函数（）{

 $("#Uname").click(function() { 
      $("#popUp").show(); 
     }); 

     $(".pophide").click(function() { 
      $("#popUp").hide(); 

     }); 
     // display previous stored username, if set 
     var prevUname = localStorage.getItem("user"); 
     if (prevUname !== null) { 
      $("#Uname").val(localStorage.getItem("user")); 
     } 

     $("#save").click(function() { 
      var valoare = $("#userSet").val(); 
      if (typeof (Storage) !== "undefined") { 
       // Store 
       localStorage.setItem("user", valoare); 


       // Retrieve 
       $("#Uname").val(localStorage.getItem("user")); 

      } else { 
       $("#Uname").val("Sorry, your browser does not support Web Storage..."); 
      } 

     }); 

     $("#message").keypress(function (e) { 

      var test = $("#Uname").val(); 
      var image = "<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSlk3gZnCZExtx8vMg5ykXThHnVmk4SjFZpwYysmCiuBXxQFXQhmg' />"; 
      var valmsg = $('#message').val(); 
      if (e.which == 13 && valmsg.trim() == "") { 
       e.preventDefault(); 
       alert('Please type a message to send'); 
      } else if (e.which == 13) { 
       $("#chat").append("<div class='mesaj' >" + test + ':' + valmsg + image + "</div>"); 
       $('#message').val(''); 
      } 
     }); 


     $("#chat").on("click", ".mesaj", function() { 
      console.log("Merge click clasa"); 
      $("#yes").click(function() { 
       $(".mesaj").remove(); 
       $("#delPop").hide(); 

      }); 

      $("#delPop").show(); 
      $("#no").on("click", function() { 
       $("#delPop").hide(); 
      }); 

     }); 

    }); 

添加CSS

#chat img { 
     float: right; 
     height: 30px; 

    }