- ベストアンサー
onmouseoverで複数の要素のstyleを上書きする
マウスオーバー時のCSSスタイルの上書きを複数の要素に対して行わせる処理をjsでやりたいと思っています。 例えば、idがa～ｊまである8個のリストのうち、b,c,dがグループ１、f,gがグループ２とします。 グループ１のどれかがマウスオーバーしたときにグループ１のほかの２つにclassをつけ、マウスアウトしたらもとに戻す。グループ２でも同様、のような場合のスマートな書き方はないでしょうか？ 元のhtml <ul> <li id="a">text</li> <li id="b">text</li> <li id="c">text</li> <li id="d">text</li> <li id="e">text</li> <li id="f">text</li> <li id="g">text</li> <li id="h">text</li> </ul> グループ１のcにマウスがあった場合はこうなってほしい <ul> <li id="a">text</li> <li id="b" class="on">text</li> <li id="c" class="on">text</li> <li id="d" class="on">text</li> <li id="e">text</li> <li id="f">text</li> <li id="g">text</li> <li id="h">text</li> </ul> グループ2のgにマウスがあった場合はこうなってほしい <ul> <li id="a">text</li> <li id="b">text</li> <li id="c">text</li> <li id="d">text</li> <li id="e">text</li> <li id="f" class="on">text</li> <li id="g" class="on">text</li> <li id="h">text</li> </ul> スタイル自体は、cssファイルにもとから入れておくものとする。 マウスアウトしたときはどの場合は元のhtmlの状態にもどる。 このようなイメージです。 idが見つからなかった場合のreturn処理もきちんと入れたいです。 ひとつひとつに書いていくことまでならできたのですが、もう少しシンプルにできたらいいなと思っています。宜しくお願いします。
- monaka416
- お礼率50% (4/8)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
グループ毎にNoでも付けておいて、<li>にイベントを設定すれば良いのでは？ 以下、ご参考まで。 <html> <head> <style> li { width:100; } .on { color:red; } </style> <script> var group = ['b,c,d','f,g']; window.onload = function(){ for (var i=0;i<group.length; i++){ var elm = group[i].split(','); for (var j=0; j<elm.length; j++){ document.getElementById(elm[j]).onmouseover = (function(n_,f_){return function(){hoge(n_,f_);};})(i,'on'); document.getElementById(elm[j]).onmouseout = (function(n_,f_){return function(){hoge(n_,f_);};})(i,''); } } } function hoge(g,f){ var elm = group[g].split(','); for (var i=0; i<elm.length; i++){ document.getElementById(elm[i]).className = f; } } </script> </head> <body> <ul> <li id="a">text-a</li> <li id="b">text-b</li> <li id="c">text-c</li> <li id="d">text-d</li> <li id="e">text-e</li> <li id="f">text-f</li> <li id="g">text-g</li> <li id="h">text-h</li> </ul> </body>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
No.1です。 idは個別の識別子ということになっているので、書き換えるとDOMでのアクセスに支障がきたすと思うけど？ 上記の理由で、idの書き換えはできないブラウザもあると思います。新規の作成したオブジェクトならid設定もできると思うけど。（このあたりは未検証） ＞<li id="b"><a href="#">text-b</a></li>にマウスがフォーカスされた場合～～ 最初に、イベントを<a>タグに設定しておくか、あるいは処理ルーチン側で<li>のクラス設定をするかわりに、子要素の<a>タグにクラス設定をすればいいだけです。 実際のタグ構成が不明ですが、firstChildに決めうちでよいのなら document.getElementById(elm[i]).firstChild.className = f; みたいな感じ。
お礼
fujillinさん お返事が遅くなってすみません。 ありがとうございます、子要素への設定でうまくできました！ とても勉強になりました、ありがとうございます！
これで良いのか、毎回微妙～。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>GroupCSSChanger?</title> <style type="text/css"> .on0 { color:red; } .on1 { color:blue; } .off { color:green; } </style> <ul id="onakasuita"> <li id="a">text</li> <li id="b">text</li> <li id="c">text</li> <li id="d">text</li> <li id="e">text</li> <li id="f">text</li> <li id="h">text</li> <li id="g">text</li> </ul> <script type="text/javascript"> //全角スペースは半角に変換のこと //@cc_on (function () { new GCSSC('onakasuita', 'off', 'on0', 'b', 'c', 'd'); new GCSSC('onakasuita', 'off', 'on1', 'f', 'g'); function GCSSC (group, css0, css1) { var count, e, p; this.css0 = css0; this.css1 = css1; this.list = []; this.group = document.getElementById(group); count = 3; while (e = arguments[count++]) { document.getElementById(e).className = css0; this.list.push(e); } this.group./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', (function (cb_) { return function (evt) { var i, j, m, eid = (evt.target || evt.srcElement).id; for (i = 0, m = cb_.list.length; i < m; i++) { if (eid == cb_.list[i]) { for (j = 0; j < m; j++) document.getElementById(cb_.list[j]).className = cb_.css1; break; } } }; })(this), false); this.group./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseout', (function (cb_) { return function () { var i = 0, m = cb_.list.length; for (; i < m; document.getElementById(cb_.list[i++]).className = cb_.css0); }; })(this), false); } })(); </script>
お礼
_pipiさん 返信が遅くなってすみません、回答ありがとうございました。 違う方法でやりましたが、勉強させていただきました！ どうもありがとうございました。
補足
fujillinさん、ありがとうございます。とてもわかりやすいです。 あと、今回は新しくクラス名を付けるという処理をしたのですが、以下のようにid名を変えるということは出来るでしょうか？ <li id="b">text-b</li>にマウスがフォーカスされた場合 → <li id="b_on">text-b</li> <li id="c_on">text-c</li> <li id="d_on">text-d</li> もしくは、<li id="b_on">text-b</li> の中にある<a>に、新規のクラスを振る <li id="b"><a href="#">text-b</a></li>にマウスがフォーカスされた場合 <li id="b"><a href="#" class="on">text-b</a></li> <li id="c"><a href="#" class="on">text-c</a></li> <li id="d"><a href="#" class="on">text-d</a></li> たびたびですみませんが、ご教授いただけるとうれしいです。 よろしくお願いします。