lastclick var无法正确设置

Question

我有一段用于排序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); 这是一个按名称，公司等对fx进行排序的锚列表。

<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;

Answer 1

问题是lastClicked和order在函数调用之间不存在。
使它们关闭（这可能是您使用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);

        });
    };
})();