Question

好吧，这里很棘手。

我有一些工具提示我用jquery显示，问题是在同一页面上有多个带有标记的框，所以它显然显示了页面上所有元素的div。

$(document).ready(function () {
    $(".comment-des").hover(function () { // hover over
        $(".cd-tooltip").show();
    }, function () { // hover off
       $(".cd-tooltip").hide();
    })
});

一些HTML代码，如果它有助于可视化布局。

<div class="cd-tooltip">
    This article has <?php comments_number('0','1','%'); ?> comments.
</div>
<div class="ed-tooltip">
    Email this article.
</div>
<div class="ld-tooltip">
    Click to get article URL.
</div>

<div class="meta-holder">
    <span class="comment-des">
        <?php comments_number('0','1','%'); ?>
    </span>             
    <span class="email-des">
        <a rel="nofollow" title="Email this page" href="mailto:?Subject=<?php the_title(); ?>&body=<?php the_permalink(); ?>"></a>
    </span>
    <span class="link-des"></span>
 </div> <!-- end div meta-holder -->

问题变成了，如何在没有父母关系的情况下显示“.comment-des”旁边的工具提示，并且在同一页面上有多个它们？

Answer 1

如果问题中的每个代码块都有一个包含它的父元素，那么它很容易：

$(".comment-des").hover(function () { // hover over
    $(this).closest('.classOfWrapper').find(".cd-tooltip").show();
}, function () { // hover off
    $(this).closest('.classOfWrapper').find(".cd-tooltip").hide();
})

否则你需要将DOM遍历到最近的meta-holder并找到之前的cd-tooltip，如下所示：

$(".comment-des").on('mouseenter mouseleave', function(e) {
    $(this).closest('.meta-holder').prevUntil(".cd-tooltip").last().prev().toggle(e.type=='mouseenter');
});

FIDDLE

修改

对于动态元素，您需要委派的事件处理程序：

$(document).on('mouseenter mouseleave', '.comment-des', function(e) { $(this).closest('.meta-holder').prevUntil(".cd-tooltip").last().prev().toggle(e.type=='mouseenter'); });

Answer 2

您必须为包含评论的每个DIV设置ID。你为什么不用“comments_number”来评估你的意见？

然后，您将拥有一个带有自己ID的div，并可以轻松地选择一个

$('div#commentID')

做你的东西！

Answer 3

您可以使用此代码：

$(document).ready(function () {


    $(".comment-des").hover(function () { // hover over
        var el = $(this).parent();

        while(!el.is('.cd-tooltip')) el = el.prev();

        el.show();
    }, function () { // hover off
        var el = $(this).parent();

        while(!el.is('.cd-tooltip')) el = el.prev();

        el.hide();
    })



});

选择在悬停元素之前的第一个.cd-tooltip。

可以简化为：

$(document).ready(function () {


    $(".comment-des").hover(function () { // hover over
        var el = $(this).parent();

        while(!el.is('.cd-tooltip')) el = el.prev();

        el.toggle();
    }
});

jquery - 页面上同一个类的多个元素 - 只想与一个进行交互

3 个答案: