Question

我看不出下一个javascript函数有什么问题。

function tapHandler( tabId, divContents ){

    var activeTab = divContents.find('.active-tab-content');    
    if(activeTab.length > 0){
        activeTab.removeClass('active-tab-content').addClass('tab-content');
    }   
    divContents.children('#'+tabId+'-tcontent').addClass('active-tab-content').removeClass('tab-content');

}

jquery find函数不起作用（我担心这可能是我的错）。

当我用

替换上一个函数的主体时

divContents.each(function(){

    //Clicked tab : Add class active-tab-content
    if(this.id == tabId + "-tcontent"){

        $(this).addClass("active-tab-content").removeClass('tab-content');

    //For the others, if was active before, remove active-tab-content           
    }else{

        if($(this).hasClass("active-tab-content")){
            $(this).removeClass("active-tab-content").addClass('tab-content');  
        }           
    }
});

有效。这意味着我在函数的第一个版本中寻找的每个css类都存在。但我找不到它。该函数从这里调用：

$( document ).ready(function() {


    $(".tabs-container").each(function() {

        //Get tab's content
        var tabsContent  = $( this ).children( ".tc-holder" ).find('.tab-content');

        //Get tabs
        var tabsMenu =  $( this ).children( ".tab-set" ).find('.tab');;


        tabsMenu.each(function () {

            $( this).click( function(){
                tapHandler(this.id, tabsContent);
            });

        });         
    }); 
});

HTML代码是：

            <div class="tabs-container">

                <div data-role="navbar" class="tab-set">

                        <ul>
                            <li id="firstTab" class="tab"><a href="#firstTab-tcontent">One</a></li>
                            <li id="secondTab" class="tab"><a href="#secondTab-tcontent">Two</a></li>
                            <li id="thirdTab" class="tab"><a href="#thirdTab-tcontent">Three</a></li>                           
                        </ul>

                </div><!-- /navbar -->


                <div class="tc-holder">

                    <div id="firstTab-tcontent" class="tab-content">
                        First tab               
                    </div>
                    <div id="secondTab-tcontent" class="tab-content">
                        Second Tab              
                    </div>
                    <div id="thirdTab-tcontent" class="tab-content">
                        Third Tab               
                    </div>

                </div>

            </div>

提前致谢

Answer 1

它不起作用，因为点击处理程序中的divContents是有效的：

$('.tabs-container').children(".tc-holder").find('.tab-content');

上面返回一个子节点数组，而不是一个包含单个父节点的数组，在该节点中可以找到子节点;要搜索数组，您需要使用.filter()而不是.find()：

var activeTab = divContents.filter('.active-tab-content');

另外，我建议简化事件处理程序注册代码：

tabsMenu.on('click', function() {
    tapHandler(this.id, tabsContent);
});

循环遍历变量时，jquery发现不工作

1 个答案: