基本jQuery-不能得到悬停（），以针对特定元素

每个项目的结构是这样的：

 <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，但应该有一个更简单的方法来做到这一点...

谢谢。

来源

2012-11-12 Olegious

您可以使用$(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-12 00:55:22 undefined

基本jQuery-不能得到悬停（），以针对特定元素

回答

相关问题