lastclick var 未正确设置答案

【问题标题】：lastclick var not getting set correctlylastclick var 未正确设置
【发布时间】：2015-07-30 06:31:08
【问题描述】：

我有这段 javascript 用于对 html 元素进行排序。

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 变量。它应该获取上一个单击项目的值，以便如果我再次单击同一个项目而不单击另一个项目，它可以升序和降序排序，也就是说，如果我单击“名称”，它将降序排序，如果我再次单击“名称”它将升序排序。

简而言之，如果它包含与排序变量相同的值，它应该升序/降序排序

但问题是它总是null，可能是因为var prevClicked = lastClicked;

【问题讨论】：

一个更简单的解决方案是在脚本开头添加一个空白类，如 last-clicked 然后检查 if $(this).hasClass('last-clicked') bla bla 然后在脚本末尾再次添加该类。跨度>

标签： javascript jquery html sorting

【解决方案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);

        });
    };
})();

【讨论】：