Question

简介：

大家好，

我一直在寻找一种方法来扩展附加的JavaScript代码，以便它能够按照我的需要工作并在各种编码网站上提出要求，但似乎没有人知道答案，所以在我最后的机会努力中来到这里是希望有人能够帮助我。

关于脚本：

运行时，下面的脚本将允许您从列表中对一组项目进行排序（通过拖放），然后这些项目的顺序将保存到cookie中，允许您刷新页面，使排序顺序保持不变

问题

附加脚本的问题在于它仅适用于1个列表，并且向页面添加其他列表将不起作用。（无论如何，无法对其他列表中的项目进行排序或保存）。

请求：

我希望能够扩展脚本，以便对多个列表进行排序，并将所有列表的订单保存到cookie中（无论是一个cookie，还是每个列表的单独cookie，这个部分都是没关系）并且为了让事情变得尽可能简单我应该注意到我不需要在列表之间混合项目我只需要单独对每个列表中的项目进行排序，然后保存/恢复cookie中每个列表的顺序

结束声明：

最后，我只是想说，我对JavaScript编程世界相当新，所以你提供的帮助越多越好，但不用说任何和所有的回复都会受到高度赞赏。

谢谢，戴夫

JavaScript ：

// set the list selector
var setSelector = "#list1";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;

// function that writes the list order to a cookie
function getOrder() {
    // save custom order to cookie
    $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}

// function that restores the list order from a cookie
function restoreOrder() {
    var list = $(setSelector);
    if (list == null) return

    // fetch the cookie value (saved order)
    var cookie = $.cookie(setCookieName);
    if (!cookie) return;

    // make array from saved order
    var IDs = cookie.split(",");

    // fetch current order
    var items = list.sortable("toArray");

    // make array from current order
    var rebuild = new Array();
    for ( var v=0, len=items.length; v<len;>
        rebuild[items[v]] = items[v];
    }

    for (var i = 0, n = IDs.length; i &lt; n; i++) {

        // item id from saved order
        var itemID = IDs[i];

        if (itemID in rebuild) {

            // select item id from current order
            var item = rebuild[itemID];

            // select the item according to current order
            var child = $("ul.ui-sortable").children("#" + item);

            // select the item according to the saved order
            var savedOrd = $("ul.ui-sortable").children("#" + itemID);

            // remove all the items
            child.remove();

            // add the items in turn according to saved order
            // we need to filter here since the "ui-sortable"
            // class is applied to all ul elements and we
            // only want the very first!  You can modify this
            // to support multiple lists - not tested!
            $("ul.ui-sortable").filter(":first").append(savedOrd);
        }
    }
}

// code executed when the document loads
$(function() {
    // here, we allow the user to sort the items
    $(setSelector).sortable({
        axis: "y",
        cursor: "move",
        update: function() { getOrder(); }
    });

    // here, we reload the saved order
    restoreOrder();
});

示例Html页面：

<!DOCTYPE html>
<html>
 <head>
  <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>

 </head>

  <body>
   <ul id="list1">
    <li id="item-1">List Item 1</li>
    <li id="item-2">List Item 2</li>
    <li id="item-3">List Item 3</li>
    <li id="item-4">List Item 4</li>
    <li id="item-5">List Item 5</li>
    <li id="item-6">List Item 6</li>
   </ul>
  </body>
</html>

Answer 1

setSelector被指定为“＃list1”，并且至少在您发布的脚本中从未更改过。此外，您使用的cookie值仅保存单个列表的排序顺序。基本上，您的脚本似乎是硬编码的，只能处理一个特定的元素; ul#list1

尝试将JS代码包装在如下函数中：

function sorter(setSelector, setCookieName) {

  /* code */

  $(setSelector).sortable({ /* parameters */});

  restoreOrder();

}

然后，对于页面上的每个列表，调用具有所需id和cookie名称作为参数的分拣机功能：

$(document).ready(function() {
  sorter('#list1', 'listOrder-list1');
  sorter('#list2', 'listOrder-list2');
  //etc...
});

但是，您的代码存在一些需要修复的问题。例如，您正在使用ID，其中应在li列表中的ul元素上使用类。 ID应该在网页中是唯一的。添加使用相同ID的其他列表来指定该假设的订单中断。将这些ID更改为类，并将“＃”替换为“。”在引用它们的选择者中。

我认为更大的问题是您用来获取父ul元素的选择器。 $("ul.ui-sortable")会获取每个<ul class="ui-sortable">元素。相反，请使用已定义的list变量代替$("ul.ui-sortable")

希望其中一些有帮助...

扩展列表排序脚本

1 个答案: