■やりたいこと
・下記処理を一度に行いたい
・各ボタン毎にクリック判別するのではなく、まとめて出来ないでしょうか?
・ボタンクリックした際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ベストアンサー
- 回答日時:
すでに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
- 回答日時:
クリックされた要素の末尾を取得してって言ってるんだからそのまま組めばいいんじゃないの?
$('input[type="button"]').click(function() {
var id = $(this).attr('id').slice(-1);
$('#piyo').load('puyo'+id+'.html');
});
ただこのままだと10になったらうまいこと動かないけどね。
htmlの出力をいじれるならvalueにファイル名を設定するとかいろいろ方法あるけど?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jsで質問です。 ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どの 4 2022/11/22 10:30
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
Selenium Basicの件
-
JavaScriptでtabindexの変更っ...
-
パソコンで動くjavascriptがス...
-
<input>のvalue値をプルダウン...
-
チェックボックスとラジオボタ...
-
SQLのmaxで求めた値を変数に代...
-
複数対応できるチェックボック...
-
同一ページ移動時ハンバーガー...
-
二つのbxsliderをレスポンシブ...
-
階層別の組織図の自動作成について
-
要素内を常に一番下を表示させたい
-
jQueryで追加した要素がマウス...
-
【再質問】計算(入数*単価)...
-
JavascriptからPHPへのAjax通信...
-
jQueryを使いformでsubmitした...
-
jQueryのblockUIをformのボタン...
-
jQueryでloadした部分に.jsが効...
-
変数の内容を別functionに渡したい
-
Googleマップに複数のピンを立...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
IndexedDB を使ってファイルア...
-
JavaScriptでtabindexの変更っ...
-
SQLのmaxで求めた値を変数に代...
-
ドラッグ & ドロップでのド...
-
Selenium Basicの件
-
パソコンで動くjavascriptがス...
-
<input>のvalue値をプルダウン...
-
inputタグ内にあるid属性の意味?
-
javascriptの計算結果をvalue=""に
-
メールを送信するボタンでOutlo...
-
テキストフォームにフォーカス...
-
チェックボックスとラジオボタ...
-
JQuery Datepickerについて
-
★大至急!JavaScriptのif文教え...
-
サイト内のデータを絞り込んで...
-
struts selectbox optionsColle...
-
Doctrineのjoinについて
-
ボタンクリックした際、id末尾...
-
Javascriptテキストの値で表示...
おすすめ情報