我正在尝试制作一个网站，用户可以在其中按偏好顺序对图片进行排名。由于每个用户将被分配随机的图片数组，因此我需要存储他们在每个位置排名的 img.src 。目前使用 sortable，它仅引用排序图像的 id。我正在尝试调用已使用 sortableJS 排序的有序数组。当我按显示的方式调用它时，它说“未定义可排序”。当我尝试在 Sortable.create 函数中插入函数 getImageOrder(orderIds)、getImageName(imageId) 和 extractNameFrom(imageSrc) 时，它无法识别 img.src 引用。有谁知道如何使其成为全局变量，以便我可以这样调用它？我需要以这种方式调用它，以便查看 img.src 的顺序。<html> <h1> Rank Images </h1><h3> From 1 (most preference) to 3 (least preference) </h3><body class="body"> <div id="rankedPicture" class="images"> <img src="/Users/rankWebsite/images/image_3.jpg" data-id="black" id = "drag1" width="106" height="69"> <img src="/Users/rankWebsite/images/image_2.jpg" data-id="orange" id = "drag2" width="106" height="69"> <img src="/Users/rankWebsite/images/image_1.jpg" data-id="white" id = "drag3" width="106" height="69"> </div> <br> <br> <div class="submit"> <button type="button"> Submit </button> </div> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> <script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script> <script type="text/javascript" src="/Users/rankWebsite/css/mainstyle.css"></script></body></html>
1 回答
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
你可以试试
const serialize = () => {
let serialized = []
let images = document.querySelectorAll('[data-id]')
images.forEach(image => serialized.push(lesson.src))
return serialized
}
这个函数应该按如下顺序返回 img src 数组：
['/Users/rankWebsite/images/image_3.jpg', ...]
或者也许更有用的东西：
const serialize = () => {
let serialized = []
let images = document.querySelectorAll('[data-id]')
images.forEach(image => serialized.push(image.attributes['data-id'].nodeValue))
return serialized
}
这应该返回你
['black', 'orange', 'white']
SortableJS 中的 set 方法仅在 onEnd 事件中被调用，因此在对某些内容进行排序之后。为了获得您的物品的订单，您可以执行以下操作：
var sorted = document.getElementById("rankedPicture")
Sortable.create(sorted, {
group: "rankedImages",
onEnd: function(e) {
console.log(serialize())
}
添加回答
举报
0/150
提交
取消