- 締切済み
JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。
JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>
- nwnwnw
- お礼率14% (1/7)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- yuu_x
- ベストアンサー率52% (106/202)
var s = document.styleSheets[0]; s.insertRule('.hidden{ display:none; }', 0);
- askaaska
- ベストアンサー率35% (1455/4149)
ツッコミどころ満載よ。 文法的にもダメな点多いけど 今回はそれはつっこまないでおくわね。 とりあえず動作面のみのつっこみにしておくわ。 まず最初のfor文終了すると 変数XXXには/index.html?AAA&BBB&CCC と来た場合の一番最後のCCCになるわよ。 次に allElement[j].className=='XXX' 文字列のXXXと比較してどうすんのよ。 この２点を直せば思うように動作するはずよ。
- yambejp
- ベストアンサー率51% (3827/7415)
大きく間違いが２つ。 一つは「if (allElement[j].className=='XXX')」の行 'XXX'ではなくXXX、つまり変数と比較しなければ無意味。 もう一つはループの問題、iループの外でjループを回してますが フロー的にはiループの中にjループを入れる必要があります。 元ソースを活かしてかくとこんな感じ <style> .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } </style> <script> window.onload=function(){changeStyle();} function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className==XXX) { allElement[j].style.display = "block"; } } } } </script> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> 実際のところもうちょっと工夫があると効率的な処理ができそうですが・・・
- fujillin
- ベストアンサー率61% (1594/2576)
＞for (var i = 0; i < search.length; i++) { ＞var XXX = search[i]; ＞} ↑の部分のループを単独で回しているので、次にある実際の処理の時には、XXXの最後の値に対してしか処理が行われていないだけでは？ 以下のような構造にすればよいのでは？ for (var i=0; ・・・){ for (var j=0; ・・・){ } }
