JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。

締切済

質問者：nwnwnw
質問日時：2009/03/06 05:16
回答数：4件

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">

</style>

<script language=javascript>

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： yuu_x
回答日時：2009/03/06 15:03

var s = document.styleSheets[0];

s.insertRule('.hidden{ display:none; }', 0);

- 0
- 件

通報する

No.3

回答者： askaaska
回答日時：2009/03/06 09:40

ツッコミどころ満載よ。

文法的にもダメな点多いけど
今回はそれはつっこまないでおくわね。
とりあえず動作面のみのつっこみにしておくわ。

まず最初のfor文終了すると
変数XXXには/index.html?AAA&BBB&CCC
と来た場合の一番最後のCCCになるわよ。

次に
allElement[j].className=='XXX'
文字列のXXXと比較してどうすんのよ。

この２点を直せば思うように動作するはずよ。

- 0
- 件

通報する

No.2

回答者： yambejp
回答日時：2009/03/06 09:39

大きく間違いが２つ。

一つは「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>

実際のところもうちょっと工夫があると効率的な処理ができそうですが・・・

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2009/03/06 09:27

＞for (var i = 0; i < search.length; i++) {

＞var XXX = search[i];
＞}

↑の部分のループを単独で回しているので、次にある実際の処理の時には、XXXの最後の値に対してしか処理が行われていないだけでは？
以下のような構造にすればよいのでは？

for (var i=0; ・・・){
　　for (var j=0; ・・・){

　　}
}