締切済み

class名で選択できるようにしたいですが。。。

2009/08/13 10:50

次は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)

2009/08/13 12:07 回答No.4

#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!"); }

質問者

お礼 2009/08/13 12:36

ああ、なるほどすごく分かりやすいですね！一つ一つやさしく説明してくださって、改めてありがとうございます！これも勉強しなきゃですね。。。

ログインすると、全ての回答が全文表示されます。

x_jouet_x
ベストアンサー率68% (162/236)

2009/08/13 11:47 回答No.3

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>にする。こんな感じでしょうか？

質問者

お礼 2009/08/13 11:56

お忙しいところ、ありがとうございます！うまくできました！

ログインすると、全ての回答が全文表示されます。

yuu_x
ベストアンサー率52% (106/202)

2009/08/13 11:45 回答No.2

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!"); 　} } ================================================================= # 全角スペースでインデントが入れてあるので、半角などに変換してください。

質問者