Question

下面是我为标签编写的插件。我确信这是一个更好的方法来写这个，但是当我开始改进这个插件时会出现这种情况。这是一个正在学习的个人项目。问题是，当我点击其中一个标签时，“活动”标签就会出现问题。 class未被分配给相应的内容li标签。我正在使用for循环为每个用户分配ID。

如果我从循环中移除(cEvent + 1)，则会分配“活跃的＆＃39;选择正确的li标签，然后分配一个“有效”标签。所有li标签的类 - 因此我知道选择器是正确的。我在循环中添加(cEvent + 1)并且它没有分配任何内容。

相关部分为：// Click Event: Open New Tab

非常感谢你的帮助。

(function(){
$.fn.sctabs = function(options){
    var defaults = {
        tabsTheme       : 'default',
        tabsOrientation : 'horizontal', // horizontal, vertical
        tabsClassName   : 'tab',
        contentClassName: 'tabcontent',
        activeClass     : 'active',
        initActiveItem  : ':first-child',
        tabsEffOpen     : 'slideDown',
        tabsEffClose    : 'slideUp'
    };

    var options = $.extend(defaults,options);

    console.log('Tabs Plugin Successfully Loaded');

    // Add Theme
    $(this).addClass(options.tabsTheme);

    // Set Tabs Orientation
    $(this).addClass(options.tabsOrientation);

    // Add Initial Classes
    $('ul.popuptabslist li').addClass(options.tabsClassName);
    $('ul.popuptabsoutput li').addClass(options.contentClassName);

    // Assign Tabs/Content to Var
    var tabsList = $('ul.popuptabslist li');
    var contentsList = $('ul.popuptabsoutput li');

    // Set the stopping point dynamically
    tabsLength = tabsList.length;
    contentsLength = contentsList.length;

    // Tabs Loop: Start the index at 0
    t = 0;
    for (; t < tabsLength; t++) {
        tabsList[t].id = "tab" + (t + 1);

        console.log('Tab id' + (t + 1) + ' Created');
    }

    // Contents Loop: Start the index at 0
    c = 0;
    for (; c < contentsLength; c++) {
        contentsList[c].id = "content" + (c + 1);

        console.log('Tab Content id' + (c + 1) + ' Created');
    }

    // Set Initial Item Open
    $('ul.popuptabslist ' + options.initActiveItem + ', ul.popuptabsoutput ' + options.initActiveItem)
        .addClass(options.activeClass);

    // Click Event: Open New Tab
    cEvent = 0;
    for (; cEvent < tabsLength; cEvent++){
        $('ul.popuptabslist li#tab' + (cEvent + 1)).on('click', function(){

            // Remove Active Class on Click
            $('ul.popuptabslist li.tab').removeClass(options.activeClass);
            $(this).parent().parent().find('ul.popuptabsoutput li.tabcontent').removeClass(options.activeClass);

            // Add Active Class to Clicked Tab and Corresponding Content
            $(this).addClass(options.activeClass);
            $('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass);
            $(this).parent().parent().find('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass);

            console.log($(this).attr('id').toUpperCase() + ' clicked');
        });
    }

};
})(jQuery);

Answer 1

这是你正在处理的臭名昭着的封闭世界。当您在标记上绑定事件时，变量cEvent会逐渐增加，这意味着每个事件的最后一个cEvent实例都为id。

您可以使用自闭功能：

(function(cEvent){
            $('ul.popuptabslist li#tab' + (cEvent + 1)).on('click', function(){

                // Remove Active Class on Click
                $('ul.popuptabslist li.tab').removeClass(options.activeClass);
                $(this).parent().parent().find('ul.popuptabsoutput li.tabcontent').removeClass(options.activeClass);

                // Add Active Class to Clicked Tab and Corresponding Content
                $(this).addClass(options.activeClass);
                $('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass);
                $(this).parent().parent().find('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass);

                console.log($(this).attr('id').toUpperCase() + ' clicked');
            });
        })(cEvent);

小提琴：http://jsfiddle.net/B8e8W/1/

为什么没有将“活动”类分配给内容列表项？

1 个答案: