0

好吧，这里有点棘手。

我有一些使用 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”没有父母关系并且在同一页面上有多个他们时，我如何只在“.comment-des”旁边显示工具提示？

4

3 回答 3

3

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

$(".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并找到以前的 DOM，cd-tooltip如下所示：

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

小提琴

编辑：

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

$(document).on('mouseenter mouseleave', '.comment-des', function(e) {
    $(this).closest('.meta-holder').prevUntil(".cd-tooltip").last().prev().toggle(e.type=='mouseenter');
});
于 2013-07-08T12:54:44.017 回答
2

您必须为每个包含评论的 DIV 设置一个 ID。你为什么不使用“comments_number”来统计你的评论呢？

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

$('div#commentID')

做你的事！

于 2013-07-08T12:50:42.030 回答
0

您可以使用此代码：

$(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();
    }
});
于 2013-07-08T12:55:28.820 回答