質問: (初歩的なミスをしている可能性が高いのでご容赦ください(汗)) 近日、長い間手を付けていなかったjQueryを勉強するために 「とあるテキストをホバーすると、その下にボックスが表示される」 という基本的なプログラムを書いてみたのですが、早速壁にぶち当たってしまいました(泣) それらを複数設置した場合に於いて、同じclassを使用しているため1つのテキストをホバーするだけで全てのボックスが表示(当たり前ですが)されてしまいます。 無論、「個別に指定する」という手があるということは存じておりますが、そのプログラムを設置しなくてはならない回数がかなり多く、個別に書いけばjQueryがとてつもなく膨大になってしまうので、どうにかしてjQueryを**1つの共通のもの**にできないか、と、悩んでおります...。 ちなみに言い忘れていましたが、テキスト、ボックスはどちらもHTMLのdiv要素です。サンプルなどを作成していただけると幸いですが、説明だけでも構いません。 ご回答どうかよろしくお願いいたします。 追記:一応ですがコードをお載せいたします。 ``` $(function () { $(".name").hover( function () { $(".selint").slideDown("fast") }, function () { $(".selint").slideUp("fast") } ); }); ``` ``` Founder 1text1 Leader 2text2 3text3 4text4 Member 5text5/div> 6text6 ``` ``` dl { margin-bottom: 50px; } dt { font-size: 30px; width: 150px; margin: auto; border-bottom: 2px solid; } .name { color: #333; font-size: 30px; width: 200px; margin: 10px; display: inline-block; border-bottom: dashed 1px #555; } .selint { font-family: Meiryo; display: none; width: 200px; top: 40px; background-color: #444; padding: 5px; color: #fff; font-size: 15px; } ``` 一見関係がなさそうなコードも、原因や修正した方が良い点などがある可能性があるので、一応載せておきました。
回答: ``` $(function () { $(".name").hover( function () { $(this).find(".selint").slideDown("fast") }, function () { $(this).find(".selint").slideUp("fast") } ); }); ``` これではどうでしょう?