1

私は一連のアイテムを持っています：

http://imgur.com/ZWKI4

各項目は次のように構成されています。

        <div class="span3 item">
          <img class="itemImage" src="assets/img/bure.jpg">
          <div class="itemDescription">
            <p><span class="itemDescLabel">Title:</span> <script>document.write(title);</script></p>
            <p><span class="itemDescLabel">Price:</span> <script>document.write(price);</script></p>
            <p><span class="itemDescLabel">Source:</span> <script>document.write(source);</script></p>
          </div><!-- /itemDescription-->
        </div> <!-- /item-->

アイデアは、私がカーソルを合わせると、その説明が表示されるはずだということです。

現在起こっていることは、1 つにカーソルを合わせると、すべてのアイテムの説明が表示されるということです。

これは、次のようにホバーを適用しているためです。

    $(document).ready(function() {
        $('.item').hover(
          function() {
          $('.itemDescription').show();
            }, 
          function() {
          $('.itemDescription').hide();
        });//end hover    
      });//end ready

私はこれをやってみました：

  $(document).ready(function() {
    $('.item').hover(
      function() {
      $(this).next('.itemDescription').show();
        }, 
        function() {
      $(this).next('.itemDescription').hide();
    });//end hover 
  });//end ready

この：

  $(document).ready(function() {
    $('.item').each(function() {
      $(this).hover(
        function() {
      $(this).next('.itemDescription').show();
        }, 
        function() {
      $(this).next('.itemDescription').hide();
      });//end hover
    });//end each
  });//end ready

どちらの方法も機能していません。

私は何を間違っていますか？各アイテムに異なる ID を与えることができることはわかっていますが、これを行うより簡単な方法があるはずです...

ありがとう。

4

1 に答える 1

2

$(selector, context)またはfindメソッドを使用できます。

$(document).ready(function() {
    $('.item').hover(function() {
        $('.itemDescription', this).show();
        // $(this).find('.itemDescription').show();
    }, function() {
        $('.itemDescription', this).hide();
    });
});

next次の兄弟要素を選択します。マークアップitemDescriptionでは、兄弟ではなく要素の子孫ですitem。

メソッドを使用することもできますtoggle。

$('.item').hover(function() {
    $('.itemDescription', this).toggle();
});

http://jsfiddle.net/pvFN9/

于 2012-11-12T00:55:22.970 に答える