Javascript 正在尝试调试JS数组中的自定义.sort

我在jQuery中开发按钮和列表系统已经有一段时间了。最近我决定让我的代码更具可复制性。我想这样做，我只需要添加类或ID，而不需要添加任何额外的代码。我很快就能为我的整个网站做到这一点了。因此，如果你去具体的，你会看到它的行动

如果你按任何顺序点击任何按钮，它将按时间顺序排列。 这些bug来自于关闭它们。 如果您至少单击三个，关闭中间的一个，然后单击一个新按钮，排序函数将崩溃，关闭的中间的一个现在与错误的类一起浮动。 下面是我当前的jQuery。在我的网站上，忽略“所有年份”按钮。等我发现这个错误后，我会继续努力的

    //the variables needed for the floating buttons
    var groupArray = $(".yearGroup");
    var buttonArray = $(".buttonGroup");
    var hideGroupArray = $(".hideGroup");
    var closeBarArray = $(".closeBar");
    var closeBar = $("#allCloseBar");
    var allButtonArray = [];


sortElements = function(a,b)
{
    if (a.text() < b.text())
    {
        return -1;
    }
    else if (a.text() > b.text())
    {
        return 1;
    }
    else
    {
        return 0;
    }
}   
$.each(buttonArray, function(i, item) {
    $(this).click(function(){

        console.log($(buttonArray[i]).text())
        console.log($(closeBarArray[i]).text())
        //for removing the tooltip when the button is clicked.  Mostly for Firefox bug
        $(".ui-tooltip-content").parents('div').remove();
        $(hideGroupArray[i-1]).slideToggle(slideToggleDuration, function(){
            htmlBody.animate({scrollTop: $(groupArray[i-1]).offset().top - 25}, {duration: timeDuration, easing: 'easeOutBack'});
            $(buttonArray[i]).toggleClass("float", 1200);
            if ($(groupArray[i-1]).height() > 0)
            {
                //This will stop any animations if the user scrolls.
                htmlBody.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e)
                {
                if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
                htmlBody.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup');
                }
                });
                closeBar.addClass("floatCloseBar");
                $(closeBarArray[i]).hide();
                allButtonArray.splice(0, 0, $(buttonArray[i]));             
                var timer;
                var delay = 1500;
                $(buttonArray[i]).hover(function() {
                //This will stop any animations if the user scrolls.
                htmlBody.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e)
                {
                if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
                 htmlBody.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); 
                }
                });
                var link = $(groupArray[i-1]);
                var offset = link.offset();
                var top2 = offset.top;
                var left = offset.left;
                var bottom = top2 + $(groupArray[i-1]).outerHeight();
                //bottom = Math.abs(bottom - offset.top);
                var right = $(window).width() - link.width();
                right = Math.abs(offset.left - right);
                var scrollDuration = 0;
                if (inRange($(buttonArray[i]).offset().top, $(groupArray[i-1]).position().top, bottom))
                {
                    //console.log("fast");
                scrollDuration = 500;
                //$(group).addClass("hoverYear");
                }

                else if ($(buttonArray[i]).offset().top <= $(groupArray[i-1]).offset().top && allButtonArray.length == 1)
                {
                    //console.log("fast");
                    scrollDuration = 500;
                    //$(group).removeClass("hoverYear");
                }
                else if ($(buttonArray[i]).offset().top > 495 && $(buttonArray[i]).offset().top < 1700 && !inRange($(buttonArray[i]).offset().top, $(groupArray[i-1]).position().top, bottom))
                {
                    scrollDuration = 1000;
                    //console.log("slow");
                    //$(group).removeClass("hoverYear");
                }
                else if ($(buttonArray[i]).offset().top > 1701 && $(buttonArray[i]).offset().top < 3000 && !inRange($(buttonArray[i]).offset().top, $(groupArray[i-1]).position().top, bottom))
                {
                    scrollDuration = 1500;
                    //console.log("slower");
                    //$(group).removeClass("hoverYear");
                }
                else if ($(buttonArray[i]).offset().top > 3001 && $(buttonArray[i]).offset().top < 6000 && !inRange($(buttonArray[i]).offset().top, $(groupArray[i-1]).position().top, bottom))
                {
                    scrollDuration = 2000;
                    //console.log("much slower");
                    //$(group).removeClass("hoverYear");
                }
                else if ($(buttonArray[i]).offset().top > 6001 && !inRange($(buttonArray[i]).offset().top, $(groupArray[i-1]).position().top, bottom))
                {
                    scrollDuration = 2500;
                    console.log("the slowest");
                    //$(group).removeClass("hoverYear");
                }
                else
                {
                    scrollDuration = 500;
                }
                //to prevent the various hover states to take control when the button isn't floating
                if (!($(buttonArray[i])).hasClass("float"))
                {
                    scrollDuration = 0;
                    console.log("doesnt have class")
                }
                // on mouse in, start a timeout
                timer = setTimeout(function() {

                //the delay for the hover scroll feature
                htmlBody.animate({scrollTop: $(groupArray[i-1]).offset().top}, scrollDuration, 'easeInOutCubic');
                }, delay);
                }, function() {
                // on mouse out, cancel the timer
                clearTimeout(timer);
                });

                $.each(allButtonArray, function(j, val){
                $(allButtonArray[j]).appendTo(closeBar);
                console.log(allButtonArray.length);
                arrowDown.show();
                arrowUp.show();
                arrowDown.prependTo(closeBar);
                arrowUp.appendTo(closeBar);

                //Changes the width of the buttons based upon how many are on the screen
                if (allButtonArray.length > 7)
                {
                    $("float").css('width', '7%');
                    $(val).css('width', '7%');
                    $(allButtonArray[0]).css('width','7%');
                    allButtonArray.sort(sortElements);
                    //console.log(val);
                }
                else if (allButtonArray.length <= 7)
                {
                    $(val).css("width", '10%');
                    $("float").css("width", '10%');
                    allButtonArray.sort(sortElements);
                    //console.log(val);
                }
                });
            }
            if ($(groupArray[i-1]).height() == 0)
            {               
                $(buttonArray[i]).css("width", '50%');                  
                allButtonArray.splice(allButtonArray.indexOf($(buttonArray[i])), 1);
                console.log(allButtonArray.length);
                $(closeBarArray[i]).show();
                $(buttonArray[i]).appendTo($(closeBarArray[i]));
                arrowDown.show();
                arrowUp.show();
                arrowDown.prependTo(closeBar);
                arrowUp.appendTo(closeBar);
            }
            if (group2001.height() == 0 && group2002.height() == 0 && group2003.height() == 0 && group2004.height() == 0 && group2005.height() == 0 && group2006.height() == 0 && group2007.height() == 0 
                && group2008.height() == 0 && group2009.height() == 0 && group2010.height() == 0 && group2011.height() == 0 && group2012.height() == 0)
            {
                $(closeBarArray[i]).removeClass("floatCloseBar");
                htmlBody.animate({scrollTop: revealAllButton.offset().top - 75}, 500);
                arrowDown.hide();
                arrowUp.hide();
            //console.log($(document).height() + " the current height");
            }
        });
        $(buttonArray[i]).toggleClass("openClose");
        $(buttonArray[i]).toggleClass("openClose2");
    });
});

function inRange(x, min, max){
   return (x >= min && x <= max);   
}

如果您想参考以前的工作，我可以发布代码。它体积更大，组织也更少。我已经尝试了很多不同的方法来消除这个错误，但我不知所措。我对JS范围的了解有限。

---

感谢您的帮助，非常感谢。

您能创建一个新的应用程序吗？尝试删除所有与排序无关的代码，用硬编码值替换输入，等等。我在本地有一个。发布这篇文章的最佳方式是什么？你可以编辑你的问题来提供它，使用一个可以让你轻松编写、测试和共享代码的服务JSFIDLE、JsBin、Plunker等等，并给我们一个链接或两者都给我们。显然，我需要2个链接的10多个声誉。这里有一个指向Plunker的链接：。我很快就会发现这个。在这一行：$buttonArray[i].toggleClassfloat，1200；我取消了延迟。未将float类添加到第一个数组项。然而，我仍然有一些关闭按钮的问题。