识别内部的 div (this) 以使用 jquery 显示答案

【问题标题】：identify div inside (this) to show with jquery识别内部的 div (this) 以使用 jquery 显示
【发布时间】：2013-05-03 18:07:15
【问题描述】：

http://s199881165.onlinehome.us/transfem/newlayout/indexlisttrypopupquestion.php

上面是我正在处理的页面。您会发现，如果您将鼠标悬停在时间轴中的图块上，则会弹出一堆 div，它们位于每个图块下方。

但是，我希望每个图块只显示一个对应的 div。

 $('#sortable1 li').mouseenter(function()
    {

          $( '.infofloat').show( "scale", 300 );


      });

      $('#sortable1 li').mouseleave(function()
    {
          $( '.infofloat').hide( "scale", 300 );
    });

和html

<div class="timelinehouse_div" id="theone<? echo $nummy;?>"><div class="thumbnail" style="background-image: url(<? echo $piccy;?>);"></div>
 <div class="meta"><div class='coverup'></div><? echo $tittie; ?></div></div>
  <div class="infofloat"><div class='arrowtop'></div></div>
</li>

【问题讨论】：

标签： jquery mouseover show

【解决方案1】：

您需要使用$(this) 来定位当前li 并使用find() 来获取您对应的.infofloat 子div

$('#sortable1 li').mouseenter(function() {
    $(this).find( '.infofloat').show( "scale", 300 );
});

$('#sortable1 li').mouseleave(function() {
    $(this).find( '.infofloat').hide( "scale", 300 );
});

【讨论】：

【解决方案2】：

使用上下文，您只能定位列表项内的.infofloat：

$('#sortable1 li').on({
    mouseenter: function() {
          $( '.infofloat', this).show( "scale", 300 );
    },
    mouseleave: function() {
          $( '.infofloat', this).hide( "scale", 300 );
    }
});

只是为了好玩，较短的版本是：

$('#sortable1 li').on('mouseenter mouseleave', function(e) {
    $( '.infofloat', this)[e.type=='mouseenter'?'show':'hide']( "scale", 300 );
});

【讨论】：

【解决方案3】：

您可以使用find() 方法：

$(this).find('.infofloat').show( "scale", 300 );

【讨论】：