私は自分のコードをより良く構造化することを学ぼうとしており、いくつかのチュートリアルに従った後、以下のパターンを使い始めました。
この方法で多くの一般的なUIウィジェットを構築することにかなりの成功を収めましたが、最初の壁にぶつかりましたが、以下の.each()ループは実際には各アイテムをループしているようには見えませんが、必要なものを適用しています1回の反復ですべてのアイテムに作用しているかのように動作します。
$ .eachとオブジェクトについて何かを読みましたが、$。eachについてはわかりませんが、それが進むべき方向であるかどうかさえわかりません。
jQuery(document).ready(function($) {
var tabs = {
trig : $('nav.tab-triggers'),
content : $('section.tabs-content'),
init : function() {
tabs.address([tabs.trig]);
tabs.address([tabs.content]);
},
address : function(item) {
//for every instance of the item
$(item).each(function() {
var i = 1;
$(this).addClass('tabs-' + i);
// for ever child element in this instance of the item
$(this).children().each(function() {
var count = 1;
if ( $(this).parent().is('nav') ) {
$(this).attr('href', '#tab-' + count);
} else {
$(this).attr('id', 'tab-' + count);
}
count++;
});
i++;
});
},
display : function () {
//show hide stuff here.
}
}
tabs.init();
});