Question

我正在创建自己的标签功能，根据用户选择从一个div跳到另一个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小提琴：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函数只能以一种方式工作

1 个答案: