似たような動作をさせたい要素はclass属性でまとめると楽

安全かつ簡単にメンテナンスできる構造の作り方

HTML＋CSS＋JavaScript（jQuery）でのWebページ作成のお話。

似たような動作をさせたい要素はclass属性でまとめると楽に管理できます。

例えば、複数並んだボタンを押すと、それぞれ別のページに移動するような場合。

jQueryとCSSのクラス指定、そしてHTML内に自前の属性値を設定してやることで、
後のメンテナンスを安全かつ簡単に行える構造にできます。

idで識別して、動作を割り振る（自前の属性値を使わない）

まず、普通にidで要素を識別して、動作を割り振る方法。

HTML

ほげ
ふが

JavaScript（jQuery）

$(function(){
    $('#hoge').click(function(){ document.location = 'hoge.html'; });
    $('#fuga').click(function(){ document.location = 'fuga.html': });
});

解説

【HTML】
各要素（例：button）はid属性のみを持ちます。

【JavaScript（jQuery）】
id属性ごとにクリック時の動作を設定します。

とてもシンプルで、コードも一見すると短いです。

しかし、それはサンプルでのお話。
もし、このボタン要素が#piyo, #foo, #bar, #baz, …と増えた場合、
HTML要素はもちろん、JavaScript側も、以下の様に増えて行きます。

HTML

ほげ
ふが
ぴよ
ふう
ばあ
ばず

JavaScript（jQuery）

    $('#hoge').click(function(){ document.location = 'hoge.html'; });
    $('#fuga').click(function(){ document.location = 'fuga.html': });
    $('#piyo').click(function(){ document.location = 'piyp.html': });
    $('#foo').click(function(){ document.location = 'foo.html': });
    $('#bar').click(function(){ document.location = 'bar.html': });
    $('#baz').click(function(){ document.location = 'baz.html': });

要素の増減がある度にHTMLとJavaScriptの双方をメンテナンスせねばならず、
とても面倒です。

classでまとめて、動作を設定（自前の属性値を使う）

一方、要素をclassでまとめて、動作を設定する方法。

HTML

ほげ
ふが

JavaScript（jQuery）

function change_location(jqObj){
    var uri = jqObj.attr('my_location');
    document.location = uri;
}

$(function(){
    $('.change_location').click(function(){
        change_location($(this));
    }
});

解説

【HTML】
各要素（例：button）は共通のclass属性と個別の属性（例：my_location）を持ちます。
個別の属性値を持つ分、各要素のHTMLは少しだけ長めです。

【JavaScript（jQuery）】
class属性共通の関数を１つだけ持ちます。（例：change_location関数）
そして、class属性共通の関数呼び出しも１つだけ持ちます。（例：$(‘.change_location’).click)

ここだけ見ると、こう思うかもしれません。
「なんだ、classとやらを使う方がHTMLも長くなるし、JavaScriptも複雑じゃないか。」と。

しかし、それはサンプルでのお話。

idによる動作の割り振りと比較するために、
このボタン要素が#piyo, #foo, #bar, #baz, …と増えた場合の結果を以下に示します。

HTML

ほげ
ふが
ぴよ
ふう
ばあ
ばず

JavaScript（jQuery）

    /* 変更不要 */

こちらも、要素の増減に合わせてHTMLのメンテナンスは必要です。

しかし、JavaScript側は変更がまったく要りません。

どちらが楽かは言うまでもありませんね。
編集ミスによるリスクも最小限に抑えられます。