通过 jqueryui 可排序的 json 洗牌答案

【问题标题】：json shuffling via jqueryui sortable通过 jqueryui 可排序的 json 洗牌
【发布时间】：2015-12-29 07:12:28
【问题描述】：

我有一个 json 数组

[    {  
    "song_name":"Gerua",
    "file":"Gerua.mp3",
    "img_src":"436264562.jpg",
},
{   
    "song_name":"Manma Emotion Jaage",
    "file":"Jaage.mp3",
    "img_src":"436264562.jpg",

},
{  
    "song_name":"Janam Janam",
    "file":"Janam.mp3",
    "img_src":"436264562.jpg",
}]

我已使用 jqueryui sortable 以以下方式显示此数组。

用户可以随机播放此列表。

当用户点击更新按钮时，我想随机播放用户选择的 json 数组。

jsfiddle here

【问题讨论】：

所以您希望 json 对象与 DOM 元素的顺序相对应
是的，如果可能的话。

标签： javascript jquery json jquery-ui

【解决方案1】：

我最喜欢的随机数组算法是Durstenfeld shuffle，这是一个 JavaScript 实现：

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

像这样使用它：

shuffleArray(yourArrayOfObject); // Will return shuffled array.

这个算法的运行时间是O(n)

【讨论】：

用户可以随机播放列表，它不是随机的。

【解决方案2】：

好的，我做到了。向 li 引入了一个临时数组和一个 mediaid 属性，在更新按钮单击时读取 dom 值，按照用户通过 mediaid 打乱的顺序将值保存到临时数组，将临时数组复制到主数组。

$("#update").click(function(e) {
 temp_json=[];
 $.each($("#sortable>li"), function(key, val) {
  temp_json.push(songs_json[$(val).attr('mediaid')]);
 });
 songs_json=temp_json;
 $("#updatedjson").html(JSON.stringify(songs_json, undefined, 2));
});

check it out!

【讨论】：