如何将img添加到使用Jquery输入时创建的每条消息?
我无法弄清楚这一点。这可能是目前我无法处理的小事。我是这个初学者,对不起。如何将img添加到使用Jquery输入时创建的每条消息?
现在我的工作在此聊天,我每次按输入类的时间被用用户名和消息创建。
在用户名的左侧,我想把这个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但我不能上传的完整代码。
希望你能以某种方式向我解释。谢谢。
我假设你想让图像跟随用户名,所以你应该使用Prepend。
$('div.mesaj')。prepend(yourimage);
确保图像路径正确。
是的,我想要的,但不只是default.png img,如果用户有不同的img我想那也在那里。谢谢你,我会尝试看看。 尝试过它,它以某种方式显示图片,但在每次发送消息后它会在同一个类中重复。 –
@azazutesting请按照此链接的默认图片[链接](http://*.com/questions/92720/jquery-javascript-to-replace-broken-images/92819#92819) – Rosebud
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('');
}
使用此代码..
是的,它的工作就像我想它,谢谢,但我希望imgpath成为用户名所选的那个。 –
你的用户名是用db存储的?如果在分贝然后也存储图像名称,当你不得不点击用户名,然后也传递图像的名称和设置,如果你有疑问,请问我更多.. –
用户名IMG存储在曲奇 –
$(文件)。就绪(函数(){
$("#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;
}
localstorage是什么让用户名默认如果新页面上,它与img无关 –
现在你可以使用上面的代码它将工作正常 – Rayudu
'。 php'不是一个图像文件,你需要链接一个图像文件 – SpYk3HH
是啊我有链接接近用户名,你可以上传你的IMG,但我不知道如何使用它,我只需要使用jQuery这个不知何故 –