このjsを複数設定したい

質問

下記のjsを同ページ内に複数設定したいのですが、
どこかがバッティングしているようで、最後の記述文しか機能しません。
どうすれば、うまく両方とも機能するでしょうか？

(function( $ ) {
$.fn.basicTabs = function(options){
var settings = $.extend({
active_class1: "current1",
list_class1: "tabs1",
content_class1: "tab_content1",
starting_tab1: 1
}, options );
var $content = $('.' + settings.content_class1);
var $list = $('.' + settings.list_class1);
$content.find('div').hide();
$content.find("div:nth-child(" + settings.starting_tab1 + ")").show();
$list.find("li:nth-child(" + settings.starting_tab1 + ")").addClass(settings.active_class1);

$("." + settings.list_class1 + ' li a').click(function(e){
$list.find("li").removeClass(settings.active_class1);
$("." + settings.content_class1 + " > div").hide();
$(this).parent().addClass(settings.active_class1);
var currentTab1 = $(this).attr('href');
$(currentTab1).show();
e.preventDefault();
});
};
}( jQuery ));

(function( $ ) {
$.fn.basicTabs = function(options){
var settings = $.extend({
active_class2: "current2",
list_class2: "tabs2",
content_class2: "tab_content2",
starting_tab2: 1
}, options );
var $content = $('.' + settings.content_class2);
var $list = $('.' + settings.list_class2);
$content.find('div').hide();
$content.find("div:nth-child(" + settings.starting_tab2 + ")").show();
$list.find("li:nth-child(" + settings.starting_tab2 + ")").addClass(settings.active_class2);

$("." + settings.list_class2 + ' li a').click(function(e){
$list.find("li").removeClass(settings.active_class2);
$("." + settings.content_class2 + " > div").hide();
$(this).parent().addClass(settings.active_class2);
var currentTab2 = $(this).attr('href');
$(currentTab2).show();
e.preventDefault();
});
};
}( jQuery ));

上記のようにそれぞれ別に同ページ内で機能させたいです。
よろしくお願いします。

回答No.1

H240S18B73 · ベストアンサー

$.fn.basicTabs =ってとこが上でも下でも同じじゃそりゃ上書きされます

$.fn.basicTabs1 =

$.fn.basicTabs2 =

とでもしてやりゃいいんじゃないでしょうか

あと、結局上と下の違いはオブジェクトのキー値と引数の初期値だけなんですよね？
じゃあ引数を変えて２回実行すればいいんじゃないでしょうか

下のは消して

$.basicTabs({
active_class1: "current2",
list_class1: "tabs2",
content_class1: "tab_content2",
starting_tab1: 1
});

とかくとか

でも、それ以前にこの設計だと.tabs2とか.tab_content2とかが複数ある場合に両方動いてしまうことになります
（そもそもこれ自体その問題に対処しようとした結果なのかもしれませんが）
$('.tabs2#tabs2A'). basicTabs($('.tab_content2#tab_content2A'),options);
みたいな感じで、タブとその操作対象を指定できる使い方ができる方向を目指すべきだと思います

お礼

ありがとうございました。解決しました。