Q&A
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。
Jqueryのコードについて１か所、理解ができないでいます。
マウスオーバーした際に、選択している行と列のセルの色を変えたい、です。
このJqueryのコードの
$('td:nth-child('+myIndex+')').addClass('target');
ですが、('+myIndex+')とmyIndexの前後に+が必要なのでしょうか。
CSSでは、li:nth-child(2) のように書けばいいので、ただの('myIndex')だけで
いいと思ったのですが、+を外すと動きません。。。
足りない知識があるからと思うのですが、詳しい方、ご説明をお願いしたいです。
よろしくお願いします。
<HTML> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Lesson18</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/script.js"></script> </head> <body> <h1>Table Row and Column Highlighting</h1> <table> <tr> <th> </th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> </tr> <tr> <th>a</th> <td>1000</td> <td>2000</td> <td>3000</td> <td>4000</td> <td>5000</td> <td>6000</td> <td>7000</td> </tr> <tr> <th>b</th> <td>2000</td> <td>3000</td> <td>4000</td> <td>5000</td> <td>6000</td> <td>7000</td> <td>8000</td> </tr> <tr> <th>c</th> <td>3000</td> <td>4000</td> <td>5000</td> <td>6000</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> <tr> <th>d</th> <td>4000</td> <td>5000</td> <td>6000</td> <td>7000</td> <td>8000</td> <td>9000</td> <td>10000</td> </tr> <tr> <th>e</th> <td>5000</td> <td>6000</td> <td>7000</td> <td>8000</td> <td>9000</td> <td>10000</td> <td>11000</td> </tr> <tr> <th>f</th> <td>6000</td> <td>7000</td> <td>8000</td> <td>9000</td> <td>10000</td> <td>11000</td> <td>12000</td> </tr> <tr> <th>g</th> <td>7000</td> <td>8000</td> <td>9000</td> <td>10000</td> <td>11000</td> <td>12000</td> <td>13000</td> </tr> </table> </body> </html> <CSS> @charset "UTF-8"; body{ font-family:Arial, sans-serif; -webkit-font-smoothing:antialiased; background:#7D3A61; text-align:center; } h1{ margin:70px 0; color:#FBD068; font-size:3em; font-weight:bold; } table{ margin:0 auto; font-size:1.1em; border-collapse:separate; border-spacing:1px; } th, td{ padding:10px 25px; } th{ background:#A76188; color:#FFF; } td{ background:#FFF; color:#503A47; } .target td, td.target{ background:#E8E8E8; } <Jquery> $(function(){ $('td').hover(function(){ $(this).parent().addClass("target"); var myIndex = $(this).index(); myIndex++; $('td:nth-child('+myIndex+')').addClass('target'); },function(){ $('.target').removeClass('target'); }); });
回答2件
0
こういう書き方もあります
javascript
1$(`td:nth-child(${myIndex})`)
投稿2020/06/11 09:41
編集2020/06/11 09:48
総合スコア116810
ちなみにnth-childははまりやすい処理なので、jqueryなら:eqをご利用されるほうがよいでしょう
（用途があっているなら）
もしくは、nth-of-typeですね。。
ありがとうございます。
私は、yambejpさんの書き方のほうが理解しやすいです。
0
ベストアンサー
'td:nth-child(0)'とかの文字列を組み立てているからです。
（myIndexが0の場合） 文字列td:nth-child( + myIndex + 文字列) でtd:nth-child(0)という文字列を得ています。
投稿2020/06/11 09:13
総合スコア69608
あなたの回答
tips
プレビュー
