2

だから私はjQueryにまったく慣れていないので、現時点ではいじくり回すだけです。現在テストスクリプトを使用しています(以下)新しい Google 画像効果。

以下のスクリプトの問題は、div を開いた状態で読み込まれることです (クリックして開く必要があります)。また、これは 1 つの div でのみ機能します。複数の div に対してスクリプトを複数回実行する必要がありますか?

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
$(document).ready(function() {
     $('#clickme').click(function() {
          $('#me').animate({
               height: 'toggle'
               }, 500
          );
     });
});
</script>


<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
  Click here to toggle me in and out =)
</div>
<img id="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
4

3 に答える 3

2

まず、複数の要素に同じIDを使用することはできません。代わりに、クラスを使用してください。jQueryはIDの最初の出現のみを選択し、残りは無視します。

次に、関数にコンテキストを提供する必要があります。つまり、クラスに$(this).next()複数の要素がある場合clickme、ブラウザは、クラスが他の要素ではなく、次に発生する要素を選択する必要があることを認識します。エレメント。me.me

$(document).ready(function() {
    // Hide image onload
    $('.me').hide();

    // Provide context for each click event
    $('.clickme').click(function() {
         $(this).next('.me').animate({
              height: 'toggle'
              }, 500
         );
    });
});

HTML：

<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
  Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
于 2013-03-08T20:17:24.837 に答える
1

div を非表示にして開始するには、display: noneインライン スタイルまたは (できれば)<style>要素または CSS ファイルを使用して、div を に設定できます。

次に、クラスと相対位置を使用して、目的を達成できます。

<script>
$(document).ready(function() {
     $('img.clickable').click(function() {
          $(this).prev('.image-info').first().animate({
               height: 'toggle'
               }, 500
          );
     });
});
</script>


<div style="background-color: #333333; color: #FFFFFF; 
      padding: 10px; width: 200px; cursor:pointer; display:none;" 
      class="image-info">
  Info about the image you clicked
</div>
<img src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" 
     alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" 
   class="alignnone size-full wp-image-552 clickable" style="border: none;" />
于 2013-03-08T20:21:38.673 に答える
0

上記のコメント投稿者が提案したことを実行し、イメージをクラスベースのアプローチに変更します。

次に、これをdocument.readyブロックの先頭に追加します

$('.me').hide();

ここでフィドル

于 2013-03-08T20:17:55.073 に答える