Q&A
試したコードを提示してください。
前提・実現したいこと
前提
・li class=btnの背景色をjsで変更したいです。
・ul中のliは複数あり、すべてclass名は同じ指定をしています。
・現状、全てにonmouseoverがあるので、一つのliを選択すると最初のliにclass（btnColorChange）が追加される状態です。
実現したいこと
どれか一つのliをmouseoverした時に最初のliのみclassが追加される
→ mouseoverしたliのbackground-colorが変更されるようにしたいです。
HTML
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Sample</title> 6 <link rel="stylesheet" href="style.css"> 7 <script src="common.js"></script> 8</head> 9<body> 10 <ul> 11 <li class="btn" onmouseover="changeBackColor();">ホーム</li> 12 <li class="btn" onmouseover="changeBackColor();">アクセス</li> 13 <li class="btn" onmouseover="changeBackColor();">メニュー</li> 14 </ul> 15</body> 16</html> 17
js
1function changeBackColor(){ 2 var elements = document.getElementsByClassName("btn"); 3 document.querySelector('li').classList.add('btnColorChange'); 4 for(i=0;i<elements.length;i++){ 5 } 6}
css
1.btn{ 2 display: inline-block; 3 padding: 0.5em 1em; 4 color: #000; 5 border-radius: 5px; 6 cursor: pointer; 7 border: 1px solid grey; 8 transition: 0.15s; 9} 10 11.btnColorChange{ 12 background-color:yellow; 13} 14
試したこと
・jsにてliにthisを付与してonmouseoverしたliにのみ実行できるように試行しましたが上手くいきませんでした。
以下追記になります。
js初心者のため見当違いのことをしているかもしれません。
試行① jsでselectされているliにthisを当てた
js
1function changeBackColor(){ 2 var elements = document.getElementsByClassName("btn"); 3 document.querySelector('li.this').classList.add('btnColorChange'); 4 for(i=0;i<elements.length;i++){ 5 } 6}
試行② 追加したいclass名にthisを当てた
js
1function changeBackColor(){ 2 var elements = document.getElementsByClassName("btn"); 3 document.querySelector('li').classList.add('btnColorChange.this'); 4 for(i=0;i<elements.length;i++){ 5 } 6} 7}
>jsにてliにthisを付与して
これでできると思ったのですけど、きちんと「自身」を参照するように組めてないだけだと思います。そのコードを提示してください。
追記致しました。試行は①②共にmouseoverしてもどこにも変化がない状態になるようでした。
よろしくお願いします。
思ってたのと全然違った・・・。
回答1件
0
ベストアンサー
引数で自分自身(this)を渡せばいいでしょう。
html
1<ul> 2 <li class="btn" onmouseover="changeBackColor(this)">ホーム</li> 3 <li class="btn" onmouseover="changeBackColor(this)">アクセス</li> 4 <li class="btn" onmouseover="changeBackColor(this)">メニュー</li> 5</ul>
js
1function changeBackColor(e){ 2 e.classList.add('btnColorChange'); 3}
投稿2020/02/02 09:06
総合スコア34075
あなたの回答
tips
プレビュー
