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>

一个带有类＆＃34;标签＆＃34;的元素。在另一个...好吧;在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的函数，在控制台中打印＆＃34; data-name＆＃34;单击.tabs＆gt; .nav＆gt; li＆gt; a时的属性。

代码可以工作但是，在控制台中我收到＆＃34;第二级选项卡＆＃34;如果我点击第一级项目。 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) {});注册点击处理程序

.child（）返回第二级项目

1 个答案: