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

Question

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

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 fiddle: http://jsfiddle.net/y925hy1p/

Answer 1

事实上，您的错误非常简单：您只在点击功能中遗漏了一个 else。调试时，我发现您的 prevNext 功能按预期工作，但随后在没有 else 语句的点击功能中，您删除了添加的类.

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

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

JQuery forEach function works only one way

jquery

tabs

each