不特定多数のaタグに対し、それぞれ複数の情報を持たせたいことがあるかと思います。単数の場合、relやtitle属性を取得して動作させてきたのですが、動作が複雑になってくると一つのタグに対し色々な情報を持たせたくなります。HTML5では「data-」を使い任意の属性をつけられると見たことがありますが、自分のサイト以外ではまだHTMLに踏み出していない状態です。onclickで処理するのがが一般的なんでしょうか。
複数の情報を持たせることは大分前から探していたのですが、取りあえずできそうなものを見つけたので記します。しかし若干使いづらい気もするので、また何か見つかったら追記していこうと思います。理想は連想配列を渡したいのですが。。。
１）区切り文字を指定し、splitで配列に格納
今回はaタグのrel属性に情報を詰め込み、「:」を区切り文字として情報を取得したいと思います。
2014/09/19 追記：デモページを追加しました。
デモページ
複数の情報をそれぞれ表示
HTML
|
1 2 3 4 |
<a class="Bt" rel="りんご:みかん">食べ物</a> <a class="Bt" rel="家:人混み">場所</a> <p>好き：<span id="textA"></span></p> <p>嫌い：<span id="textB"></span></p> |
aタグのrel属性に、2つずつの情報を持たせています。
classがBtのリンクをクリックすると、「好き」「嫌い」の項目に、それぞれの情報を表示できるようにします。
ｊQuery
|
1 2 3 4 5 6 |
$('.Bt').click(function(){ BtData = $(this).attr('rel'); BtArr = BtData.split(":"); $('#textA').text(BtArr[0]); $('#textB').text(BtArr[1]); }); |
attrでrel属性から値を取得した後、splitによって「：」で区切り、変数「BtArr」に配列として格納しています。
グループを作り、任意のタグに対して複数処理を行う
以下の例では、「ターゲット：値」で構成されたグループを「|」で区切り、それぞれのターゲットに対し値を出力できるようにしています。特定のタグに対して処理が行えるため、こちらの方が凡用性が高いと思います。
HTML
|
1 2 3 4 |
<a class="Bt" rel="#textA:りんご|#textB:みかん">食べ物</a> <a class="Bt" rel="#textA:家|#textB:人混み">場所</a> <p>好き：<span id="textA"></span></p> <p>嫌い：<span id="textB"></span></p> |
jQuery
|
1 2 3 4 5 6 7 8 |
$('.Bt').click(function(){ BtData = $(this).attr('rel'); GroupeArry = BtData.split("|"); jQuery.each(GroupeArry, function(index, val){ Arry = val.split(":"); $(Arry[0]).text(Arry[1]); }); }); |
一度splitでグループごとに配列に格納し、eachでそれぞれを更に区切った上、処理を行っています。
関数を作成し、任意のタグに対して処理を選択
関数を作ることにより、さらに汎用性が広がるのではないでしょうか。全項目のグループを作ってもいいかと思います。
以下の例では、「ターゲット：処理：値」を受け取り、「TxtChg」という関数を実行しています。
HTML
|
1 2 3 4 |
<a class="Bt" rel="#textA:rewrite:書き換えられました。">書き換え</a> <a class="Bt" rel="#textA:add:追加されました。">追加</a> <a class="Bt" rel="#textA:remove:">削除</a> <p>結果：<span id="textA"></span></p> |
ｊQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$('.Bt').click(function(){ BtData = $(this).attr('rel'); BtArr = BtData.split(":"); $(BtArr[0]).TextChg({Action:BtArr[1],Val:BtArr[2]}); }); jQuery.fn.TextChg = function(config){ config = jQuery.extend({ Action:'add', //処理の初期設定 Val:'' //値の初期設定 },config); return this.each(function(i, elem) { if(config.Action == 'rewrite'){ //書き換える $(this).text(config.Val); } else if(config.Action == 'add'){ //加える $(this).append(config.Val); } else if(config.Action == 'remove'){ //中身を消す $(this).empty(); } }); }; |
関数に「rewrite」、「add」、「remove」の内どれかを渡せるようにし、任意のタグに対して処理を選択できるようにしています。
利点と問題点
HTMLが汚くなる感じですが、HTMLで指定できるとタグごとの設定が出来るので、ページの他にjsファイルやhead部分を編集しなくてもいいのかなと思います。特にWordpressなどでページを作成する場合、ページごとにJavascriptを設定するのは面倒くさい気がするので。
このsplitを利用した場合だと順番は固定されるので、項目を増やしたり減らしたりする時は更新が大変そうですね。
[…] ;)」のように変更します。 splitを利用して複数の情報を読み取ることについては、別にこちらの記事で書いています。 横と縦がそれぞれ何マスに指定したかは、parseIntで整数に直し、WとH […]