ボタンクリックでid末尾を取得してコンテンツを表示する方法
- ボタンクリックした際にid末尾を取得して指定したコンテンツを表示する方法について紹介します。
- 各ボタン毎にクリック判別するのではなく、一度に処理を行いたい場合にも役立つ内容です。
- jQueryを使用して特定のidをクリックした際に、他の要素の内容を読み込んで表示する方法を解説します。
- ベストアンサー
ボタンクリックした際、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'); });
- re97
- お礼率80% (601/744)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 (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")~~ とか。 クラスと機能が一致するので、理解しやすくなるのではないでしょうか。
その他の回答 (1)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
クリックされた要素の末尾を取得してって言ってるんだからそのまま組めばいいんじゃないの? $('input[type="button"]').click(function() { var id = $(this).attr('id').slice(-1); $('#piyo').load('puyo'+id+'.html'); }); ただこのままだと10になったらうまいこと動かないけどね。 htmlの出力をいじれるならvalueにファイル名を設定するとかいろいろ方法あるけど?
お礼
回答ありがとうございましたー
関連するQ&A
- ボタンのID名を取得するには?
押されたボタンのid名を取得するにはどのように記述したらよいのでしょうか? <input type="button" value="ボタン" id="push" onClick="click(this)"> function click(obj) { var getId = obj.elements.id; } 上記では取得できませんでした。 すみませんがお分かりの方いましたらよろしくお願いします。
- ベストアンサー
- JavaScript
- チェックボックスをクリックした際、自動的に他の値も
■チェックボックスをクリックした際、自動的に他の値も追加したい 下記のようなチェックボックスがあった際に、 <input type="checkbox" name="hoge[]" value="1" />ホゲ <input type="checkbox" name="piyo[]" value="1" />ピヨ <input type="checkbox" name="puyo[]" value="1" />プヨ ホゲをクリックしたら、value="1"になるかと思うのですが、 このvalue部分を動的に生成することはできるでしょうか? 例えば、ホゲをクリックしたら(ホゲをクリックした時だけ)、 自動的に、 <input type="checkbox" name="hoge[]" value="1" /> <input type="checkbox" name="hoge[]" value="2" /> <input type="checkbox" name="hoge[]" value="3" /> <input type="checkbox" name="hoge[]" value="4" /> <input type="checkbox" name="hoge[]" value="5" /> <input type="checkbox" name="hoge[]" value="6" /> <input type="checkbox" name="hoge[]" value="7" /> <input type="checkbox" name="hoge[]" value="8" /> <input type="checkbox" name="hoge[]" value="9" /> をクリックしたのと同じ処理が走るよう、スクリプトで書くには、 どうすればよいでしょうか?
- ベストアンサー
- JavaScript
- 1アクションでPOST・GET、両方送信したい
1つのフォームからボタンをクリックして、 POST・GET送信と、両方飛ばすには、どうすればよいでしょうか? URLに「表示させたいパラメータ」と「表示させたくないパラメータ」 があります。 「表示させたいパラメータ」は、GETで、 「表示させたくないパラメータ」は、POST送信したいのですが、 1つのフォームで、同時に飛ばす方法が分かりません。 <form method =post action=hoge.php> <input type=text name="piyo" value="piyo"> <input type=hidden name=puyo_id value=puyo>←これだget送信したい <input type=submit value="送信"> </form>
- ベストアンサー
- PHP
- ボタンをクリックして、リンクを開きたい
ボタンをクリックして、リンクを開きたいのですが <input type="button" value="yahooを表示する" onClick="location=http://www.yahoo.co.jp/"> をしても何も起りません。 出来れば、新しいブラウザで開きたくて、 <A href="http://www.yahoo.co.jp/" target="HOGE">yahooを表示する</a> と同じように、ボタンをクリックして開きたいので、ご教授お願いします。
- ベストアンサー
- HTML
- 複数ボタンのクリックイベント
JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 (一番下に全ソースを貼りました。見づらくて申し訳ありません。) htmlに複数の似た名前のボタンがあります。 名前:button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) { document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。 ・0~9のイベントは正しく登録されている。 ・しかし、全てがchecked(10)を呼んでいる 質問1 これを回避する方法と、その対処理由を教えて頂きたくお願い致します。 質問2(オプション) 参考になる資料を教えていただければ幸いです。 例)サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。 */ for (i=2; i<4; i++) { document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>
- 締切済み
- JavaScript
- JavaScriptでIE上のボタンクリック
JavaScriptの初心者でIE上で表示されたボタンをクリックしたいのですが、2つのボタンのうち1つをクリックしたいです。 「document.all("Buttonok").click();」,「document.getElementById("Buttonok").click();」と記入してみたのですが、エラーとなります。 下記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか? どなたかすいませんがご教授ください。 ===================================================== ボタンのHTML ※formで囲まれてないです。 <table border="0" cellspacing="0" cellpadding="0" width="150"> <tr> <td width="50%"> <div id="Button"> <input type="buttonok" value="OK" class="Button" onclick="onClk("1");" /> </div> <div id="Button"> <input type="buttonng" value="NG" class="Button" onclick="onClk("0");" /> </div> </td> </tr> </table>
- ベストアンサー
- JavaScript
- 外部ファイルload処理完了してから、指定要素削除
外部ファイルload処理を完了してから、指定要素を削除したいのですが、 どうすればよいでしょうか? <やりたいこと> ・hoge.php(の指定範囲)を読み込んでから、(読み込んだhoge.phpの)ulタグpiyoクラスを削除したい <現状> ・最後にhoge.phpが読み込まれるためか(?)、piyoクラスが削除されません $(function(){ $("button").click(function(){ $("div").load("./hoge.php div.test"); $("ul.piyo").remove(); }) })
- ベストアンサー
- AJAX
- javascriptでinput属性の入力
複数のボタンがあります。 それぞれのボタンによって、value値を変えたいと考えています。 通常であれば <button class='button' type='submit' name='volume' value='350'>350購入</button> <button class='button' type='submit' name='volume' value='450'>450購入</button> という形を利用しますが、理由があり、 type='submit' を使用できません。 そこで、 <input id="button350" type="button" value="350購入" /> <input id="button450" type="button" value="450購入" /> というsubmit属性の無いボタンを使用しながら、「javascriptを使いname value を抽出しsubmitまで持っていく」ことを考えています。 そこで、下記のようなものを2種類(350と450は別の記載方法でテスト)作ってみましたが、いずれもsubmitは出来ますが、value値を渡すことが出来ません。 どのように書けば、name属性にvalue値を渡すことが可能でしょうか? <form action="abc.php" method="post" name="form2" id="form2"> <script> $(function(){ $('#button350').click(function() { $('input[type=\'submit\']'); $('input[name=\'volume\']'); $('input[value=\'350\']'); $('#form2').submit(); }); $('#button450').click(function() { $('input[type=\'submit\'],[name=\'d4_buy_stock_volume2\'],[value=\'450\']'); $('#form2').submit(); }); }); </script> <BR> <BR> <input id="button350" type="button" value="350購入" /> <BR> <input id="button450" type="button" value="450購入" /> </form>
- ベストアンサー
- JavaScript
- 同名ボタンのクリック時要素番号の取得方法
<html> <head> <script Language="JavaScript"><!-- function doSentaku(btn) { //クリックされたボタンの要素番号が知りたい alert(btn.name); } // --></script> </head> <body> <form name="mainWin"> <input type="button" value="配列ボタンテスト1" name="testbtn" onClick="javaScript:doSentaku(this)"><br> <input type="button" value="配列ボタンテスト2" name="testbtn" onClick="javaScript:doSentaku(this)"><br> <input type="button" value="配列ボタンテスト3" name="testbtn" onClick="javaScript:doSentaku(this)"><br> </form> </body> </html> ----------------------------------------------------------------------------------------- このようなFromがあった場合、nameが同じである時、javaScriptではボタンのElemetは配列扱いになるかと思うのですが、doSentaku関数内ではnameは取得できるとして、クリックされた要素番号は取得できるのでしょうか? なお、訳ありでdoSentaku関数のボタンonClickの関数引数はすべて同じ定義しかできないものとします。 つまり個々ボタンを識別する値は指定できないと言うことです。 まことに申し訳ありませんが、どうかアドバイスのほどよろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScript setTimeout
失礼します現在ボタンがクリックされた場合、指定秒数をカウント後console.logし、再度ボタンがクリックされた場合秒数を初期化して、再度カウントするようにしたいのですがうまくいきません、何卒ご教授お願い致します。 <td align="center"><input type="button" value=" 1 " onclick="myValue(1)" style="width:100%; height:45px;"></td> <script type="text/javascript"> function hoge(){ //console.log("piyo"); } function myValue(myData){ setTimeout(hoge(),3000); } </script>
- ベストアンサー
- JavaScript
お礼
回答&解説ありがとうございました 大変参考になりましたー