Question

我想给我的表自定义工具提示。所以我给每个td一个名为trigger1的类。并且每个td都有一个自定义工具提示，它是默认的hide.Now我添加了mouseover和mouseout事件，但我发现它不起作用。当我删除contents()时，它运作良好。任何人都可以告诉我原因吗？我什么时候应该使用contents()？

 $(function(){
 $(".trigger1").each(function () { 
        $(this).on('mouseover', function () { 
  //not work: $(this).contents().find(".tooltipcontent").show();            
  $(this).find(".tooltipcontent").show(); 
        });
        $(this).on('mouseout', function () {
             /*not work: $(this).contents().find(".tooltipcontent").hide(); */
            $(this).find(".tooltipcontent").hide(); 
        });
    }); 
});

每个td内容都是这样的：

  <td align="center" class="trigger1">
   <a target="_blank" href="#">1234511</a> 
   <div class="tooltipcontent" style="display: none;">
      some content
      <a  target="_blank" href="#">more</a>
   </div>
</td>

Answer 1

根据jQuery .contents() documentation，.contents()和.children()之间的区别在于.contents()也会返回文本和注释元素，绝大多数jQuery方法都不支持

使用它几乎肯定会感到困惑。用[{1}}替换.contents()的实例将以您希望的方式工作，如下所示：

.children()

Answer 2

我认为你可以使用.hover()方法是一种更好的方法。

以下是一个示例：https://jsfiddle.net/fgma3bt6/

jQuery(document).ready(function($) {
    $('.trigger1').hover(function() {
        $(this).find('.tooltipcontent').show();
    }, function() {
        $(this).find('.tooltipcontent').hide();
    });
});

Answer 3

$（this）.contents（）将返回包含文本和注释节点的子节点数组。您将无法直接找到类tooltipcontent。改变

$(this).contents().find(".tooltipcontent")

到

$(this).children('.tooltipcontent') or $(this).find(".tooltipcontent")

让它发挥作用。

Answer 4

这可能与问题无关。

你不必在此使用jquery，你可以使用css来达到同样的效果。试试这个：

CSS：

 .trigger1:hover .tooltipcontent{ display: block )

为什么我不能使用jquery contents（）来找到我的dom？

4 个答案: