Question

我是jQuery的初学者。我试着创建一个工具提示。我有类似流动的代码：

<div class="view-port">
    <div class="item">
        <a href="#" class="item-link"><img src="product"></a>
        <div class="tooltip">some description</div>
    </div>
    <div class="item">
        <a href="#" class="item-link"><img src="product"></a>
        <div class="tooltip">some description</div>
    </div>
    <div class="item">
        <a href="#" class="item-link"><img src="product"></a>
        <div class="tooltip">some description</div>
    </div>
    <div class="item">
        <a href="#" class="item-link"><img src="product"></a>
        <div class="tooltip">some description</div>
    </div>
</div>

当鼠标输入每个.tooltip元素时，我想在每个.item元素中显示.item div。我写了流动的代码来做到这一点：

$('.view-port').on('mouseenter', '.item', function(e){             
   $(' .tooltip').show();
});

但是当我在每个项目上移动鼠标时，显示所有.tooltip。

我该如何解决..？！

TNX

Answer 1

您可以使用.find（）或.children（）相对于$（this）

$('.view-port').on('mouseenter', '.item', function(e){             
    $(this).find('.tooltip').show();
});

或

$('.view-port').on('mouseenter', '.item', function(e){             
    $(this).children('.tooltip').show();
});

$（this）= $（'。item'）相对于$（'。view-port'）

Answer 2

您应该尝试此操作（.find()将搜索使用$(this)选择的当前元素中的元素：

$('.view-port').on('mouseenter', '.item', function(e){             
   $(this).find('.tooltip').show();
});

或者这个：

$('.view-port').on('mouseenter', '.item', function(e){             
   $('.tooltip', this).show()
});

Answer 3

事件处理程序中的

this引用鼠标输入的当前item元素，因此请使用this和.find()

$('.view-port').on('mouseenter', '.item', function(e){             
   $(this).find('.tooltip').show();
});

如何使用jQuery在每个元素中选择子元素？

3 个答案: