ボタンクリックした際、id末尾を取得してそれを利用

質問

■やりたいこと
・下記処理を一度に行いたい
・各ボタン毎にクリック判別するのではなく、まとめて出来ないでしょうか？

・ボタンクリックした際id名がhoge以下を取得
・jQueryでloadする際、puyoに取得した内容を足したい

■現状HTML
<input type="button" id="hoge1" value="">
<input type="button" id="hoge2" value="">
<input type="button" id="hoge3" value="">

■現状JS
$("#hoge1").click(function(){
　$('#piyo').load('puyo1.html');
});
$("#hoge2").click(function(){
　$('#piyo').load('puyo2.html');
});
$("#hoge3").click(function(){
　$('#piyo').load('puyo3.html');
});

回答No.2

fujillin · ベストアンサー

すでにANo1様が回答なさっていますが、ご質問の通りにやるなら、

$("#hoge1,#hoge2,#hoge3").click(function(){
　 var n = this.id.replace(/^hoge/, "");
　$('#piyo').load("puyo" + n + ".html");
});
とでもすれば可能です。
（数字であることのチェックはしてませんが、正規表現を変えれば可能です。）

使う目的にもよりますが、
1）まとめて処理しているのに個別IDによっている
　（ボタンの増減によってスクリプトを変更せざるを得ない）
2）URLがIDの連番に固定されていて汎用性に欠ける
　（外部リンクなどを含ませようとしても無理）
などが気になります。

1)は連番のIDであれば、
　$("input[id^='hoge']")～～
のような識別方法も考えられますが、IDによらずクラスなどを利用することで汎用化できるでしょう。
2)はスクリプト側でURLの配列を持っておく方法もありますが、ANo1様もご指摘のようにHTML側に記述しておくのがわかりやすそうです。
inputのvalue値を使いたいところですが、表示値に利用されてしまうので、inputの代わりにbutton等を利用すれば表示値、URL(value)を個別に指定することができるのではと思います。

結果的に、
$("div.hoge button").click(function(){
　$('#piyo').load(this.value);
});
のようにすることでIDも不要になりますし、ボタンの増減にも対応可能になります。

ボタンが散在している場合は、
$("button.hoge")～～
とか。

クラスと機能が一致するので、理解しやすくなるのではないでしょうか。

お礼

回答＆解説ありがとうございました
大変参考になりましたー

回答No.1

Taiyonoshizuku

クリックされた要素の末尾を取得してって言ってるんだからそのまま組めばいいんじゃないの？

$('input[type="button"]').click(function() {
var id = $(this).attr('id').slice(-1);
$('#piyo').load('puyo'+id+'.html');
});

ただこのままだと10になったらうまいこと動かないけどね。

htmlの出力をいじれるならvalueにファイル名を設定するとかいろいろ方法あるけど？

お礼

回答ありがとうございましたー