我有一段用于排序html元素的javascript。

SortingElements = function () {

    var $this = $(this);

    var order = "desc";
    var lastClicked = null;
    var list = null;
    var sorting = null;

    var init = function() {

        var prevClicked = lastClicked;

        sorting = $this.attr("data-sort");

        if (prevClicked == sorting)
            order = (order == "desc") ? "asc" : "desc";

        lastClicked = sorting;

        list = $('.sorting-list'), lis = $('.sort-item'), liHeight = lis[0].offsetHeight;

        $(list).css('height', list.outerHeight());

        tinysort('.sorting-list .sort-item', { selector: 'span[data-sorting="' + sorting + '"]', order: order }).forEach(function (elm, i) {

            $(elm).fadeOut(i * 175);
            $(elm).fadeIn(i * 175);

        });
    }

    init();

}


使用$('.sort-selector-item').click(SortingElements);调用此脚本,该脚本是对f.x进行排序的锚列表。按名称,公司等

<ul class="no-list list-inline list-unstyled sort-selector margin-bottom-30">
    <li><a href="#" class="sort-selector-item" data-sort="name">Navn</a></li>
    <li><a href="#" class="sort-selector-item" data-sort="company">Virksomhed</a></li>
    <li><a href="#" class="sort-selector-item" data-sort="position">Stilling</a></li>
</ul>


我的问题是prevClicked变量。它应该获取上一个单击的项目的值,以便如果我再次单击同一项目而不单击另一个项目,则它可以对升序和降序进行排序,也就是说,如果单击“名称”,它将对其进行降序排序,如果我再次单击“名称”,它将按升序排列。

简而言之,如果它包含与sorting var相同的值,则应该对其进行升序/降序排序

但问题在于它始终是null,可能是由于var prevClicked = lastClicked;

最佳答案

问题在于lastClickedorder在函数调用之间不存在。
使它们关闭(这可能是您使用init的意图)应该会有所帮助:

SortingElements = (function()
{
    var order = "desc";
    var lastClicked = null;
    return function() // This function "becomes" SortingElements
    {
        var $this = $(this);
        var list = null;
        var sorting = null;
        var prevClicked = lastClicked;

        sorting = $this.attr("data-sort");
        if (prevClicked == sorting)
            order = (order == "desc") ? "asc" : "desc";
        lastClicked = sorting;
        list = $('.sorting-list'), lis = $('.sort-item'), liHeight = lis[0].offsetHeight;
        $(list).css('height', list.outerHeight());
        tinysort('.sorting-list .sort-item',
        {
            selector: 'span[data-sorting="' + sorting + '"]',
            order: order
        }).forEach(function (elm, i)
        {
            $(elm).fadeOut(i * 175);
            $(elm).fadeIn(i * 175);

        });
    };
})();

07-24 09:36
查看更多