JQuery forEach 函数只能以一种方式工作

Question

我正在创建自己的 tab 键函数，用于根据用户选择从一个div 跳转到另一个div。基本上它与JQueryUI的Tabs非常相似。我唯一的问题是"下一个"和"上一个"按钮 - 我写了一个根据参数（"prev"或"next"）更改变量类的函数，虽然它对"下一个"工作得很好，但它在"上一个"失败了......我不知道为什么，对我来说，一切看起来都很好。

.HTML：

    <div class="ar-tabbed-content">
    <div class="ar-tab ar-tab-1"><p>tab1</p></div>
    <div class="ar-tab ar-tab-2"><p>tab2</p></div>
    <div class="ar-tab ar-tab-3"><p>tab3</p></div>
    <div class="ar-tab ar-tab-4"><p>tab4</p></div>
    <div class="ar-tab ar-tab-5"><p>tab5</p></div>

<div class="ar-tabbed-content--nav">
    <ul>
<!--<li class="tab-prev"><a href="#prev">Prev</a></li>-->
    <li><a href="#ar-tab-1">global market</a></li>
    <li><a href="#ar-tab-2">slide 2</a></li>
    <li><a href="#ar-tab-3">slide 3</a></li>
    <li><a href="#ar-tab-4">slide 4</a></li>
    <li><a href="#ar-tab-5">slide 5</a></li>
  <!--  <li class="tab-next"><a href="#next">Next</a></li>-->
</ul>
</div>
</div>

.JS：

$(document).ready(function() {
    (function() {
        var tabsContainer = $('.ar-tabbed-content'),
            allTabs = tabsContainer.find('.ar-tab'),
            tabsQty = allTabs.length,
            firstTab = tabsContainer.find('.ar-tab-1'),
            lastTab = tabsContainer.find('.ar-tab-' + (tabsQty)),
            tabsNav = tabsContainer.find('.ar-tabbed-content--nav');
        tabsContainer.find('ul').prepend('<li class="tab-prev"><a href="#prev">Prev</a></li>');
        tabsContainer.find('ul').append('<li class="tab-next"><a href="#next">Next</a></li>');
        var tabsNavBtn = tabsNav.find('ul li a');
        firstTab.addClass('active');
        firstTab.show();
        console.log(lastTab);
        function prevNext(prevOrNext) {
            allTabs.each(function(i, el) {
                var elem = $(el);
                if (elem.hasClass('active') || elem.hasClass('active2')) {
                    elem.removeClass('active');
                    elem.removeClass('active2');
                    elem.hide();
                    var nextElem;
                    var tabNo,
                        nextTab;
                    if (prevOrNext == 'next') {
                        tabNo = 'ar-tab-' + (tabsQty);
                        nextTab = firstTab;
                        nextElem = tabsContainer.find('.ar-tab-' + (i + 2));
                    } else {
                        tabNo = 'ar-tab-1';
                        nextTab = lastTab;
                        nextElem = tabsContainer.find('.ar-tab-' + i);
                    }

                    console.log(nextElem);
                    console.log(tabNo);
                    console.log(nextTab);
                    if (elem.hasClass(tabNo)) {
                        nextTab.addClass('active2');
                        nextTab.show();
                        return false;
                    } else {
                        nextElem.addClass('active2');
                        nextElem.show();
                        return false;
                    }
                }
            });
        };

        tabsNavBtn.click(function(e) {
            e.preventDefault();
            var thisBtn = $(this),
                btnHref = thisBtn.attr('href'),
                btnValue = btnHref.substring(1);
            if (btnValue == 'prev') {
                console.log('prev');
                prevNext('prev');
            }
            if (btnValue == 'next') {
                prevNext('next');
            } else {
                var tabClass = '.' + btnValue,
                    tabToShow = tabsContainer.find(tabClass);
                allTabs.removeClass('active');
                allTabs.removeClass('active2');
                allTabs.hide();
                tabToShow.addClass('active');
                tabToShow.addClass('active2');
                tabToShow.show('fade', 300);
            }
        });

    })();

});

JS小提琴：http://jsfiddle.net/y925hy1p/

Answer 1

事实上，

你的错误非常简单：你只错过了点击功能中的一个else。调试时，我发现您的prevNext函数按预期工作，但是在没有 else 语句的 click 函数中，您删除了添加的类。

if (btnValue == 'prev') {
    console.log('prev');
    prevNext('prev');
} else if (btnValue == 'next') {
    prevNext('next');
}