Question

我有一些评论树。默认情况下，评论底部的链接（如编辑或回复）是隐藏的（通过CSS）。我需要显示特定的评论，这是在鼠标下。好的，我使用这样的代码：

 $('[data-comment-id]').on('mouseenter', function(){
    console.log('mouseenter');
    $(this).find('.actionComment').css('visibility','visible');
});

$('[data-comment-id]').on('mouseleave', function(){
    console.log('mouseleave');
    $(this).find('.actionComment').css('visibility','hidden');
});

它适用于像这样的html（简化版）：

<div data-comment-id="1101">
  <span class="text">Text of comment</span>
 <span class="actionComment">[Links]</span>
     <div data-comment-id="1102">
       <span class="text">Text of comment 1</span>
       <span class="actionComment">[Links]</span>
     </div>
     </div>

将鼠标悬停在嵌套div上，我看到所有元素（使用class actionComment）都被选中为可见。但我想在$（this）嵌套元素中只显示他的评论。这个开发人员的问题是由用户的评论构建的，嵌套的级别可能是任何人。

Answer 1

你可以尝试一下吗？

$('[data-comment-id]').on('mouseenter', function(){
    console.log('mouseenter');
    $(this).find('.actionComment').css('visibility','visible');
});

$('[data-comment-id]>[data-comment-id]').on('mouseleave', function(){
    console.log('mouseleave');
    $(this).find('.actionComment').css('visibility','hidden');
});

<div data-comment-id="1101">
    <span class="text">Text of comment</span>
    <span class="actionComment">[Links]</span>
<div data-comment-id="1102">
    <span class="text">Text of comment 1</span>
    <span class="actionComment">[Links]</span>
</div>

这是code

如何在Jquery中使用mouseenter提取嵌套元素？

1 个答案: