- ベストアンサー
どの<li><a>が押されたか判別したい
- 家計簿のカテゴリーを作成している際、<li>要素の中でどの<a>が押されたかを判別し、そのテキストを取得する方法について質問します。
- <select>要素の場合には「selectedIndex」を使用して選択されたメニューの配列番号を取得することができますが、<li>要素の場合には同様の方法があるのか疑問です。
- また、<li>要素の個数は固定ではなく、JavaScriptを使用してカテゴリーの追加や削除が可能になる予定です。
- zukky_saito
- お礼率34% (9/26)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 jQueryを併用すればごく簡単な記述で実現できます。 各種ブラウザの違いも吸収してくれます。 ====JavaScript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { // id="category"のliのaがクリックされたら $('#category li a').click ( function() { // $(this)はそのクリックされた要素。その要素のテキストを取得 alert ( $(this).text() ); return false; }); }); </script> ==== HTML <body> <div id="wrapper"> <ul id="category"> <li><a href="#">光熱費</li> <li><a href="#">雑費</li> </ul> </div> </body>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
気になるのですが、 ＞その押された中身のテキスト これは厳密に意味でＡ要素の内容と言う意味ですか？ <li><!-- LI要素の開始タグ --> <a href="ABC">光熱費</a><!-- A要素 href属性の値はABC A要素の内容は光熱費 --> </li><!--LI要素の終了タグ --> それを取得して何に使うのでしょう。
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 jQueryを利用しないと面倒くさい記述になります。（笑） /*@cc_on@*/ document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/ 'click', function(evt){ var t = evt./*@if(1)srcElement@else@*/target/*@end@*/; var p = t.parentNode; if(t.nodeName=="A" && p && p.parentNode.id=="category") alert(t./*@if(1)innerText@else@*/textContent/*@end@*/); }, false);
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 すみません、ミスってました。 <ul id="category"> <li><a href="#">光熱費</a></li> <li><a href="#">雑費</a></li> </ul> ですね。 ちなみに上からの順番を取得したければ alert ( $('#category li a').index(this) ); これで取得できます。
