Question

所以我正在编写一个jQuery选项卡插件，我可以在我的网站上重复使用它。以下是HTML：

    <div class="js-tabs">
    <div id="top-text">Top 10 Best</div>

    <ul class="top-side-tabs">
        <li id="selected">
            <a id="day" data-url="/top/day">Today</a>
        </li>
        <li>
            <a id="week" data-url="/top/week">Week</a>
        </li>
        <li><a id="month" data-url="/top/month">Month</a>
        </li>
        <li>
            <a id="year" data-url="/top/year">Year</a>
        </li>
    </ul>
    <div id="top-text">
        <div class="js-tabs-container">
            <div class="loading">Loading...</div>
        </div>
    </div>
</div>

这是插件本身：

(function($) {
var tabs = {        
    fn: function(params) {
        return this.each(function() {
            $thisContainer = $(this);
            $contentContainer = $thisContainer.find('.js-tabs-container').first();
            var $thisUl = $thisContainer.find('ul').first();
            var $thisLi = $thisUl.children('li');

            var tabs = [];
            var tabUrls = [];

            $thisLi.each(function() {
                $links = $(this).children('a').attr('id');
                tabs.push($links);

            });

            // Display first url in the container when page first loads
            var firstTabUrl = $thisUl.find('li > a').first().data('url');
            //console.log(firstTabUrl);
            $.ajax({
                url: firstTabUrl,
                cache: false,
                success: function(content) {
                    $contentContainer.empty().append(content).hide().fadeIn(500);
                    $('.loading').hide();
                }
            });

            // Add click event handler for each tab
            for (var i = 0; i < tabs.length; i++) {
                var id = i;
                $('#' + tabs[i]).bind('click', (function(id) {
                    return function() {
                        // Grab tab's url from data attribute
                        var tabUrl = $(this).data('url');
                        // Find the js-tabs-container
                        // This is what we're changing
                        if (tabs.length) {
                            $('.loading').show();
                            $.ajax({
                                url: tabUrl,
                                cache: false,
                                success: function(content) {
                                    $contentContainer.empty().append(content).hide().fadeIn(500);
                                    $('.loading').hide();
                                }
                            });
                        }
                    };
                })(id));
            }

        });
    }
}
    $.fn.tabs = tabs.fn
})(jQuery);

$(window).load(function() {
    $('.js-tabs').tabs();
});

忽略我正在使用一些独特的div id的事实，如果我不止一次复制该HTML代码，我希望它能独立于另一个工作。

发生的事情是：

A）

Top 10 Best | Today | Week | Month | Year
[.js-tabs-container]

B）

Top 10 Best | Today | Week | Month | Year
[.js-tabs-container]

假设我点击上方A中的“周”，B中的内容将重新填充。看起来它也经历了.each（）不止一次（因为它逐渐淡入和淡出两次）。最重要的是，如果您点击B中的任何选项，它就行不通。

我是这种插件开发风格的新手，可以将所有内容保存在自己的命名空间中，所以我可能会忽略一些主要内容，所以任何帮助都会很棒。

此外，任何关于如何重新考虑这一点的建议都将非常感激。

Answer 1

结束省略var作为$ thisContainer和$ contentContainer的前缀。应该现在正常工作：

(function($) {
var tabs = {
    fn: function(params) {
        return this.each(function() {
            var $thisContainer = $(this);
            var $contentContainer = $thisContainer.find('.js-tabs-container').first();
            var $thisUl = $thisContainer.find('ul').first();
            var $thisLi = $thisUl.children('li');

            var tabs = [];

            $thisLi.each(function() {
                $links = $(this).children('a').attr('id');
                tabs.push($links);

            });

            // Display first url in the container when page first loads
            var firstTabUrl = $thisUl.find('li > a').first().data('url');

            $.ajax({
                url: firstTabUrl,
                cache: false,
                success: function(content) {
                    $contentContainer.empty().append(content).hide().fadeIn(500);
                    $('.loading').hide();
                }
            });

            // Add click event handler for each tab
            for (var i = 0; i < tabs.length; i++) {
                var id = i;
                $('#' + tabs[i]).bind('click', (function(id) {
                    return function() {
                        // Grab tab's url from data attribute
                        var tabUrl = $(this).data('url');
                        // Find the js-tabs-container
                        // This is what we're changing
                        if (tabs.length) {
                            $('.loading').show();
                            $.ajax({
                                url: tabUrl,
                                cache: false,
                                success: function(content) {
                                    $contentContainer.empty().append(content).hide().fadeIn(500);
                                    $('.loading').hide();
                                }
                            });
                        }
                    };
                })(id));
            }

        });
    }
}
$.fn.tabs = tabs.fn
})(jQuery);

$(window).load(function() {
    $('.js-tabs').tabs();
});

自定义jQuery插件仅针对特定容器

1 个答案: