Пользовательский плагин JQuery только для конкретного контейнера

Question

Итак, я пишу плагин jQuery tabs, который я могу использовать на своем сайте.Ниже приведен 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, если я копирую этот 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();
});