javascript - .child() 返回第二级项目

Question

嗯，我认为 .child() 函数是我的问题......但我对此不确定。

我在 html 中有这个

<div class="tabs" data-name="1st level tabs">
    <ul class="nav">
        <li><a href="#">1st level link</a></li>
        <li><a href="#">1st level link</a></li>
    </ul>
    <ul class="content">
        <li>
        1st TEXT
        <div class="tabs" data-name="2st level tabs">
            <ul class="nav">
                <li><a href="#">2nd level link</a></li>
                <li><a href="#">2nd level link</a></li>
            </ul>
            <ul class="content">

            </ul>
        </div>
        </li>
        <li>1st TEXT</li>
    </ul>
</div>

一个元素的类“tabs”位于另一个元素中...好的；在JS中:

$(function($) {
    var Tabs = function(element,options){
        self = this;
        self.$element = element;


        self.testdrive = function (){
            console.log(self.$element.attr("data-name"));
        }

        self.$element.children(".nav").children("li").children("a").click(function(e){
            e.preventDefault();
            //Returns EVER 2nd level
            self.testdrive();
            //Triggering directly a Tabs instance returns EVER 2nd level
            $(this).closest(".tabs").data("test.tabs").testdrive();
        });

    }
    //JQuery plugin
    $.fn.tabs = function () {
        return this.each(function () {
            var $this = $(this);
            var data  = $this.data('test.tabs');
            //Creating only one instance of Tabs
            if(!data){
                data = new Tabs($this);
                $this.data('test.tabs',data);
            }
        });
    }
    //Adding tabs plugin to all ".tabs"
    $(function() {
        $('.tabs').each(function(){
            $(this).tabs();
        });
    });
}( jQuery ));

当调用 $(element).tabs() 时，在数据属性 test.tabs 内创建函数 Tabs 的实例。如果已定义 test.tabs，则仅使用旧实例来保留它。

为了测试它，我创建了一个名为 testdrive 的函数，用于在单击 .tabs>.nav>li>a 时在控制台“data-name”属性中打印。

代码有效，但是，在控制台中，如果我单击第一级项目，我会收到“第二级选项卡”。 child() 函数有问题吗？我的代码有问题吗？

感谢您的帮助。

Answer 1

问题是 self 的变量声明，因为您没有使用 var 来声明它是在全局上下文中创建的。所以

var self = this;

您还使用test.tabs键设置数据，但使用simple.tabs键读取数据

$(this).closest(".tabs").data("test.tabs").testdrive();

演示:Fiddle

此外，我认为您可以使用 self.$element.find("> .nav > li > a").click(function (e) {}); 注册点击处理程序