如何將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; 

    }