Question

我有一个列表中的项目列表：

<ul id="myList">    
    <li>10 Apple</li>
    <li>20 Banana</li>
    <li>30 Orange</li>
</ul>

这个列表可以通过jQuery进行排序。然而，一旦我安排了我需要重新计算其位置的物品，橙色移动到顶部将等于10，苹果将等于20和香蕉30。

然后我需要在url中传递这些数据，以便我的服务器端脚本进行处理。

当我提交时，将更改后的列表值传递到URL的最佳方法是什么？

我的第一个想法是拥有一个带有隐藏值的表单，所以当我处理列表时，它会将值作为隐藏输入添加到表单中，以便我将数据传递到URL中。

Answer 1

每个项目前的数字是否严格基于位置？

如果是这样，排序完成后，您只需根据每个li元素替换内容。

URL如何包含列表文本？

在下面我操作时假设它都可以附加一个查询字符串值列表。

有更短的方法可以做到这一点，但希望详细程度有助于理解发生的事情。

<script>
    var listChanger = function() {
    //updates the digits prepended to each item in list
    //updates URL with text of list in querystring

        //accumulates the text of each list item
        var valueAccumulator = [];

        //Operate of each item in myList
        $('#myList li').each(function(index) {

            //regular expression to strip initial digits
            var reInitialDigits = /^\d+/;

            //remove initial digits
            var textWithoutDigits = $(this).text().replace(reInitialDigits,"");

            //prepend new digits (index starts at 0, so add 1 then multiply by 10 to get desired number)
            $(this).text(((index + 1) * 10) + textWithoutDigits);

            //append text to accumulator
            valueAccumulator.push($(this).text());
        });

        //querystring to strip everything after the querystring
        var reQueryString = /\?list\=.*$/;

        //placeholder
        var linkWithoutQueryString = '';

        //remove querystring
        linkWithoutQueryString = $('#myLink').attr('href').replace(reQueryString,'');

        //change link to include URL encoded list of values
        $('#myLink').attr('href',linkWithoutQueryString + "?list=" + encodeURI(valueAccumulator.join("|")));
    }

    $(document).ready(function() {
        //make the list sortable and each time the sorting stops, run the listChanger function
        $("#myList").sortable({stop:listChanger});
    });
</script>

<ul id="myList">
    <li>10 Apple
    </li>
    <li>20 Banana
    </li>
    <li>30 Orange
    </li>
</ul>
<br />
<a id="myLink" href="mylink.html">mylink.html</a>

迭代“可排序”列表然后相应地更改值的最佳方法

1 个答案: