Question

您好我花了2个小时的时间来寻找答案，但似乎无法找到答案，他们都只按1因素排序，这是我正在尝试做的事情：

通过两个参数处理div列表的排序：

参数1， sortId; div＃results-container中的每个div＃result都有一个名为sortId的数据属性，范围从0到2（0,1,2）。在这个div里面还有一个带有类名totalPrice的p。

参数2， orderBy：ASC / DESC。

按钮： 我有三个按钮应该按sortId属性排序这些div：

按钮1按sortId排序0 按钮2按sortId排序1 按钮3按sortId 2排序

然后它还应该对p.totalPrice ASC进行排序，然后再次按DESC排序，但仍保持sortId的顺序。

我可以按价格排序：

value1 = $(a).find('p.totalPrice').text();
value2 = $(b).find('p.totalPrice').text();

value1 = Number(value1.replace(/[^0-9\.]+/g,""));
value2 = Number(value2.replace(/[^0-9\.]+/g,""));

result = (value1 < value2 ? -1 : (value1 > value2 ? +1 : 0));

我也无法弄清楚sortId是如何做到的。

UPDATE：

我创建了一个JSFiddle：https://jsfiddle.net/ngepj78s/

我主要只是排序，而且很可能不那么笨重的代码。

Answer 1

我已更新了您的jsfiddle，现在应该按预期工作了。

HTML：

<button class="btn btn-rounded active sort" type="submit" data-sort-id="0">0</button>
<button class="btn btn-rounded inactive sort" type="submit" data-sort-id="1">1</button>
<button class="btn btn-rounded inactive sort" type="submit" data-sort-id="2">2</button>
<div id="results-container">
    <div id="result" data-sort-id="0">
        (id=0)
        <p class="totalPrice">$110.00</p>
    </div>
    <div id="result" data-sort-id="1">
        (id=1)
        <p class="totalPrice">$70.00</p>
    </div>
    <div id="result" data-sort-id="1">
        (id=1)
        <p class="totalPrice">$90.00</p>
    </div>
    <div id="result" data-sort-id="0">
        (id=0)
        <p class="totalPrice">$100.00</p>
    </div>
    <div id="result" data-sort-id="2">
        (id=2)
        <p class="totalPrice">$160.00</p>
    </div>
</div>

JS：

var asc = true;
var currId = 0;
$("button.btn.btn-rounded").on('click', function ()
    {
        $("button.btn.btn-rounded").removeClass("active").addClass("inactive");
        $(this).removeClass("inactive").addClass('active');

        var sortId = $(this).data('sort-id');
        //Needed for sorting preferences
        asc = (currId != sortId ? true : !asc);
        currId = sortId;

        //Generalized function call
        var params = Array();
        params.push(sortId);
        $('.sort').each(function(){
            if(sortId != $(this).data('sort-id')) params.push($(this).data('sort-id'));
        });
        leeSort(params);
    });

    function leeSort(sortIds)
    {
        var array = Array();

        // Get Items by Sort Order
        for (var x = 0; x < sortIds.length; x++)
        {
            var sortId = sortIds[x];
            array[sortId] = $('div#results-container div#result[data-sort-id="' + sortId + '"]').get();
        }

        //console.log(array);

        $('div#results-container').html('');

        for (x = 0; x < sortIds.length; x++)
        {
            var sortId = sortIds[x];
            var sortArray = array[sortId].sort(function(a, b) {
                var oA = $(a).find("p.totalPrice").html().trim().replace(/[^0-9\.]+/g,"");
                var oB = $(b).find("p.totalPrice").html().trim().replace(/[^0-9\.]+/g,"");
                if(asc){
                    return oA - oB;
                }else{
                    return oB - oA;
                }
            });

            for (var i = 0; i < sortArray.length; i++)
            {
                $('div#results-container').append($(sortArray[i]));
            }
        }
    }

需要注意的一点是，我使用了函数外部声明的2个变量来存储有关输出状态的必要信息。排序依赖于这些变量，并在点击事件中进行修改。

另外，我概括了你的函数调用。这不是更改排序首选项所必需的，但它允许您的代码使用更多div。

谢谢， 2mnyzs

jQuery对多个因素进行排序

UPDATE：

1 个答案: