- 締切済み
class名で選択できるようにしたいですが。。。
次はclass名がalarmのリンクをクリックしたとき「Alarm!」という警告が開くように意図したものですが。。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script type="text/javascript"> var funcs = document.getElementsByTagName("*"); for (var i=0;i<funcs.length;i++){ if(funcs[i].className=="alarm"){ function alarm() { alert ("Alarm!"); } } } </script> </head> <body> <a href="#" class="alarm" onclick="alarm()">click</a> </body> </html> 考えどおり動けないですね。どこが悪いのでしょうか。 忙しいお時間で申し訳ございませんが、ご意見のほどよろしくお願いいたします。
- wis1674
- お礼率100% (4/4)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
#No.1です。やたらに、ついかします <a href="#" class="alarm" onclick="alarm()">click</a> は、 <a href="#" class="alarm">click</a> に。 でも、こんなかきかたは、いろいろもんだいがありそうなので もうやめましょう。 var funcs = document.getElementsByTagName("*"); が、じっこうされるとき、まだbodyぶぶんは、よみこまれていません なので <script type="text/javascript"> //ここにいろいろ </script> </body> のようにするとwindow.onloadが、ふようになります。 </body>のちょくぜんにおく。 クラスのしていは、ふくすうしていできます。 なので、１つだけはんていするのは、びみょう。 class="abc def aaa bbb alarm ccc" なら、できない。なので if (/\balarm\b/.test(funcs[i].className)) funcs[i].onclick = ... とか。 for (var i=0;i<funcs.length;i++){ のlengthは、まいかいよびだすより for (var i=0, I = focus.length;i<I;i++){ とか。 それよりも for (var i=0, o; o = focus[i++];){ とか。 というよりも、それぞれのくらすをしらべて、たくさんいべんとを はりつけるよりも documentに、ひとつだけいべんとをはりつけて、そこからしらべると かんたんかもよ！ //@cc_on document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'click', alarm, false); function alarm(evt) { var e = evt./*@if(1) srcElement @else*/ target /*@end@*/; if (/\balarm\b/.test(e.className)) alert ("Alarm!"); }
- x_jouet_x
- ベストアンサー率68% (162/236)
JavaScriptは以下のように記述、 ---------- <script type="text/javascript"> window.onload = function() { var funcs = document.getElementsByTagName("a"); for (var i=0;i<funcs.length;i++) { if(funcs[i].className == "alarm") { funcs[i].onclick = alarm; } } }; function alarm() { alert ("Alarm!"); } </script> ---------- HTMLで<a href="#" class="alarm" onclick="alarm()">click</a>としているところを<a href="#" class="alarm">click</a>にする。 こんな感じでしょうか？
お礼
お忙しいところ、ありがとうございます！ うまくできました！
- yuu_x
- ベストアンサー率52% (106/202)
head 読み込み時点では、body はまだ読み込まれていないため、funcs にはスクリプトより前の要素しか含まれていないことが原因です。 全ての要素に、イベントリスナをくっつけて周る（提示コードではリスナ登録してないですね。これも原因か。）のは非効率的です。 クリックイベントはバブリングする（上位要素でイベントが拾える）ので、なるべく利用するようにしましょう。 下のコードはどこでも好きなところに置いてください。 ================================================================= //@cc_on ----------------------------------------------------------------- バージョンチェック（省略） ----------------------------------------------------------------- var WIDGET = { escapeRegExp : function( str ) { return str.replace ( /([.?*+\-^$\\|!=\(\)\[\]{}])/g, '\\$1' ); }, hasClassName : function( n, className ) { return n ? RegExp( '(?:^|\\s)' + this.escapeRegExp( className ) + '(?:\\s|$)' ).test( n.className ) : false; } } ----------------------------------------------------------------- function clickHandler( evt ) { var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/; switch( true ) { case WIDGET.hasClassName( target, 'alarm' ) : alarm( target ); break; defalut : break; } } document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', clickHandler, false ); ----------------------------------------------------------------- function alarm( n ) { if( /*@if(1) /A/i.test( n.tagName ) @else@*/ n instanceof HTMLAnchorElement /*@end@*/ ) { alert ("Alarm!"); } } ================================================================= # 全角スペースでインデントが入れてあるので、半角などに変換してください。
お礼
これは勉強するしかないですね！ 予想外の高級技術を教えてくださってありがとうございます！ 勉強します！
- babu_baboo
- ベストアンサー率51% (268/525)
window.onload = function () { var funcs = document.getElementsByTagName("*"); for (var i=0;i<funcs.length;i++){ if(funcs[i].className == "alarm") funcs[i].onclick = alerm; } } function alarm() { alert ("Alarm!"); } かな？
お礼
これもうまくできました！ まことにありがとうございます！ 勉強します！
お礼
ああ、なるほど すごく分かりやすいですね！ 一つ一つやさしく説明してくださって、改めてありがとうございます！ これも勉強しなきゃですね。。。