###はじめに
お世話になります。
初歩的な質問で大変恐縮ですが、jQueryのfor文について教えてください。
** 「質問の追記とお詫び」を追加しました。2015/01/22/21:25 **
###やりたいこと
li要素をhoverしたときにli要素内にある特定のp要素(p.item-titleのみ)の背景を変えたいと考えております。
ググりながら書いたら、下記の記述で実現できました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function() { $('.item li:nth-child(1)').hover( function() { $('.item li:nth-child(1) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(1) .item-title').css("background-color","transparent"); }); $('.item li:nth-child(2)').hover( function() { $('.item li:nth-child(2) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(2) .item-title').css("background-color","transparent"); }); $('.item li:nth-child(3)').hover( function() { $('.item li:nth-child(3) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(3) .item-title').css("background-color","transparent"); }); }); </script> <div class="item"> <ul> <li> <p class="item-img">画像<p> <p class="item-title">ああああああ</p> </li> <li> <p class="item-img">画像<p> <p class="item-title">いいいいいい</p> </li> <li> <p class="item-img">画像<p> <p class="item-title">うううううう</p> </li> </ul> </div>
表示は意図した通りになりましたが、nth-childを何回も繰り返しているのでfor文でも実現できるのではと考え下記のコードに変更しました。
###for文を利用したコード
<script> $(function() { var count = $('.item li').length; for(var i=1; i < count; i++) { $('.item li:nth-child(' + i + ')').hover( function() { $('.item li:nth-child(' + i + ') .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(' + i + ') .item-title').css("background-color","transparent"); }); } }); </script>
for文に変更したら意図した通りの表示になりません。
記述に問題がありますでしょうか?それともfor文では実現できないのでしょうか?
どこに問題があるか教えて頂けると幸いです。
よろしくお願いいたします。
###質問の追記とお詫び
私の質問内容が分かり難いため、イメージ図を追記いたします。
折角ご回答頂いたのに申し訳ございません。
ご回答頂いた方々にお詫び申し上げます。
ご回答頂いた内容は参考にさせて頂きます。
やりたいことは下記のイメージ図になります。
分かりやすくするためにCSSを追加しております。
li要素をホーバーしたときにp.item-titleの背景色を変更できればと考えております。
ですのでp.item-imgをホバーしてもp.item-titleの背景色が変わるようになります。
![イメージ説明]WIDTH:600
イメージ図のコードは下記になります。
これをfor文または効率の良い書き方はあるのかなと思い、質問いたしました。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <style> body { font-family: Meiryo, メイリオ, sans-serif; } * { margin:0; padding:0; } .item li { width:200px; margin:0 20px 0 0; list-style:none; float:left; text-align:center; padding:5px; border:1px dotted #000; } .item-img { height:150px; line-height:150px; background:#c8f0ff; border:1px dotted #0065c3; } .item-title { padding-top:10px; padding-bottom:10px; } </style> <div class="item"> <ul> <li> <p class="item-img">画像<p> <p class="item-title">ああああああ</p> </li> <li> <p class="item-img">画像<p> <p class="item-title">いいいいいい</p> </li> <li> <p class="item-img">画像<p> <p class="item-title">うううううう</p> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function() { $('.item li:nth-child(1)').hover( function() { $('.item li:nth-child(1) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(1) .item-title').css("background-color","transparent"); }); $('.item li:nth-child(2)').hover( function() { $('.item li:nth-child(2) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(2) .item-title').css("background-color","transparent"); }); $('.item li:nth-child(3)').hover( function() { $('.item li:nth-child(3) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(3) .item-title').css("background-color","transparent"); }); }); </script> </body> </html>
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/01/22 14:40
退会済みユーザー
2015/01/23 04:43