从 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>
沧海一幻觉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()) }
随时随地看视频慕课网APP
相关分类
JavaScript