从 SortableJS 调用函数作为全局变量

从 SortableJS 调用函数作为全局变量

我正在尝试制作一个网站，用户可以在其中按偏好顺序对图片进行排名。由于每个用户将被分配随机的图片数组，因此我需要存储他们在每个位置排名的 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>

沧海一幻觉

浏览 133回答 1

1回答

泛舟湖上清波郎朗

你可以试试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

0

随时随地看视频慕课网APP

相关分类

JavaScript