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-->

这个想法是，当我将鼠标悬停在一个上时，应该显示它的描述。

当前发生的情况是，当我将鼠标悬停在一个上时，会显示所有项目的描述。

发生这种情况是因为我正在像这样应用悬停：

    $(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 回答