已解決430363個問題，去搜搜看，總會有你想問的

從 SortableJS 調用函數作為全局變量

首頁猿問從 SortableJS...

從 SortableJS 調用函數作為全局變量

JavaScript

滄海一幻覺 2023-09-28 15:52:19

我正在嘗試制作一個網站，用戶可以在其中按偏好順序對圖片進行排名。由于每個用戶將被分配隨機的圖片數組，因此我需要存儲他們在每個位置排名的 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())

}

反對回復 2023-09-28

1 回答
0 關注
182 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從 SortableJS 調用函數作為全局變量

從 SortableJS 調用函數作為全局變量

1 回答

添加回答