【发布时间】：2019-01-10 08:34:04
【问题描述】：
我正在使用 Firebase 数据库和 jQuery 制作一个消息传递应用程序，但我有一个问题：图像总是进入一个 <div>！
1 条消息和 1 张图片：
2 条消息，每条带有 1 张图片：
这是我的代码：
HTML
<div id="messages">
JavaScript + jQuery
var l = console.log;
function getSearch() {
var result = {};
if (location.search !== "") {
const s = location.search.replace("?", "").split("&");
for (var i = 0; i < s.length; i++) {
result[s[i].split("=")[0]] = s[i].split("=")[1];
}
return result;
} else {
return null;
}
}
function dicToArray(dic) {
var array = [];
for (var i = 0; i < Object.keys(dic).length - 1; i++) {
array[i] = dic[i];
}
return array;
}
function arrayToDic(array) {
var dic = {};
for (var i = 0; i < array.length; i++) {
dic[i] = array[i];
}
dic.length = array.length;
return dic;
}
function deleteFromArray(array, no) {
var newArray = [];
for (var i = 0; i < array.length; i++) {
if (i !== no) {
newArray[newArray.length] = array[i];
}
}
return newArray;
}
// Listen for Messages
firebase.database().ref("/conversations/" + getSearch().c + "/msgs").on("value", function(s) {
l("Reached conversation messages.");
firebase.database().ref("/user_ids").on("value", function(snapshot) {
l("Reached user_ids");
$("#messages").html("");
l("#messages is empty");
for (var i = 0; i < s.val().length; i++) {
l("Reached message loop: message no. " + i);
if (s.val()[i].sender === snapshot.val()[firebase.auth().currentUser.email.replace(/\./g, "_")]) {
l("Sender was self.");
l("Configuring messageDiv.");
var messageDiv = $("<div></div>");
messageDiv.addClass("message");
messageDiv.addClass("self");
messageDiv.attr("data-msg-no", i);
l("Configuring optionsDiv.");
//console.log(i);
var optionsDiv = $("<div></div>");
optionsDiv.addClass("options");
l("Configuring deleteButton.");
var deleteButton = $("<button></button>");
deleteButton.addClass("delete");
deleteButton.click(function() {
// Get message number from data-msg-no
var msgNo = parseInt($(this).parent().parent().attr("data-msg-no"));
//console.log(msgNo);
l("Button Clicked\n Deleting Message No. " + msgNo);
// Get messages from Firebase
firebase.database().ref("/conversations/" + getSearch().c + "/msgs").once("value", function(snapshot) {
l("Got messages from firebase");
// Convert dic to array
var msgArray = dicToArray(snapshot.val());
l("Converted dic to array");
l(msgArray);
// Remove message number
var newArray = deleteFromArray(msgArray, msgNo);
l("Removed message from array");
l(newArray);
// Convert array to dic
var newMsgDic = arrayToDic(newArray);
l("Converted array to dic");
l(newMsgDic);
// Set in Firebase
firebase.database().ref("/conversations/" + getSearch().c + "/msgs").set(newMsgDic).then(function() {
l("Set in Firebase Database");
}).catch(function(error) {
console.error("Firebase Error at Line 138:\n" + error.code + " - " + error.message);
});;
});
});
deleteButton.text("Delete");
optionsDiv.append(deleteButton);
l("Appended options div to delete button.");
var text = s.val()[i].data;
var height = 40;
if (text.includes("\n")) {
console.log(text.split("\n"));
for (var i = 0; i < text.split(/\n/g).length - 1; i++) {
height += 10;
}
}
l("MessageDiv increased in height if it needed to. for \\n");
if (text.includes("FILE:")) {
l("The message is a file.");
(function() {
// Is File
// File ID
var fileId = text.replace("FILE:", "");
l("fileId of file (to retrieve from Storage): " + fileId);
// File from Firebase Storage
var fileObject = firebase.storage().ref("/user_files/" + fileId);
l("fileObject has been set");
// Check if Image
fileObject.getMetadata().then(function(metadata) {
l("Reached metadata.");
l(metadata);
if (metadata.contentType.split("/")[0] === "image") {
// Is an image
l("File is an image.");
l("Configuring <img>");
// Create <img>
var image = $("<img>");
// Add 'image-attachment' class to <img>
image.addClass("image-attachment");
// Add to message div
messageDiv.append(image);
messageDiv.append(optionsDiv);
// Get download url of image
fileObject.getDownloadURL().then(function(URL) {
l("Reached download URL: " + URL);
// Set src of <img> to download url
image.prop("src", URL);
});
image.on("load", function() {
l("The image has loaded.");
// Add height to message div
messageDiv.height(messageDiv.height() + image.height());
l("MessageDiv increased in height if it needed to. for images.");
});
} else {
// Is not an image
l("It's not an image.");
l("Configuring <a> download link.");
// Create <a> element
var link = $("<a></a>");
// Add 'download-attachment' class to <a>
link.addClass("download-attachment");
// Get download url
fileObject.getDownloadURL().then(function(URL) {
l("Reached download URL: " + URL);
// Add URL to 'href'
link.prop("href", URL);
});
// Add height to message div
messageDiv.height(messageDiv.height() + 20);
l("MessageDiv increased in height if it needed to. for download attachments.");
// Add to message div
messageDiv.append(link);
messageDiv.append(optionsDiv);
}
});
})();
} else {
messageDiv.append(text.replace(/\n/g, "<br>"));
messageDiv.append(optionsDiv);
}
messageDiv.height(height);
$("#messages").append(messageDiv);
} else {
var messageDiv = $("<div></div>");
messageDiv.addClass("message");
messageDiv.addClass("other");
console.log(i);
var text = s.val()[i].data;
messageDiv.append(text);
$("#messages").append(messageDiv);
}
}
});
});
这段代码没有任何错误。一切正常。我只需要找到解决这个问题的方法。
干杯！
【问题讨论】：
-
好吧，首先，你在一个代码块中有很多代码，这会让你的测试变得很糟糕。考虑将其分解一下。然后，您可以轻松传递虚拟数据并构建消息。
-
呼应 Bibberty 的评论，您的代码绝对难以理解。无论如何，如果您的“图像都进入一个
div”，那是因为您正在创建多个图像元素并将它们粘贴在一个div中。相反，您需要创建多个divs，然后分别将imgs 添加为子代。此外，您需要确保divs 本身是可区分的。或者，您可以使用 CSSbackground-image将图像直接放入divs。最后，我推荐使用你最喜欢的浏览器的 Web Inspector；我怀疑你会发现它非常有用。 -
@benas 我正在使用我的 Web Inspector，但这很好。
标签： javascript jquery firebase firebase-realtime-database