Question

今天，当我在不同的元素上盘旋时，我试图触发特定元素的工具提示。我不是那种经验丰富的jQuery，但我最终还是通过这些文档阅读了这篇文章。之后，我看到了我如何引用目标元素，它似乎真的很复杂。我想知道是否有更好的方法可以产生相同的结果。

我正在使用的HTML如下：

<div class="item">
    <h3 class="level-title">ITEM 1
        <span class="level-label" data-toggle="tooltip" data-placement="top" data-animation="true" title="Tooltip text that pops up">Title Text
        </span>
    </h3>
    <div class="level-bar">
        <div class="level-bar-inner" data-level="70%">
        </div>                                      
    </div>
</div>

<div class="item">
    <h3 class="level-title">ITEM 2
        <span class="level-label" data-toggle="tooltip" data-placement="top" data-animation="true" title="Tooltip text that pops up">Title Text
        </span>
    </h3>
    <div class="level-bar">
        <div class="level-bar-inner" data-level="70%">
        </div>                                      
    </div>
</div>

在我的HTML文件中，我有5个左右的项目部分。我想要的是工具提示不仅在观众盯上“标题文本”时触发，而且当它们悬停在“level-bar-inner”div上时触发。为了达到这个目的，我提出了以下JavaScript：

jQuery(document).ready(function($) {
...
    $('.level-bar-inner').hover(
        function(e) {
            $($($(e.target).parent().siblings()[0]).children()[0]).tooltip('show');
        },
        function(e) {
            $($($(e.target).parent().siblings()[0]).children()[0]).tooltip('hide');
        }
    );
...
});

这似乎是一个草率的解决方案，但却是一个合理的解决方案。这个方法取决于只有一个兄弟和一个孩子，幸运的是在我的情况下我的HTML文件中的所有“项目”部分都是如此。这让我想问是否有更好/更有效的方法来检索这个元素，甚至只是翻转它的工具提示。

Answer 1

您可以使用this关键字引用引发事件的元素。您还可以使用jQuery的DOM遍历方法，而不是从jQuery对象重复获取DOMElement，并再次将其重新转换为jQuery对象。试试这个：

$('.level-bar-inner').hover(function(e) {
    $(this).parent().prev().find('span').tooltip('show');
}, function(e) {
    $(this).parent().prev().find('span').tooltip('hide');
});

Answer 2

您最好一直到父.item，然后找到相应的工具提示元素会更容易：

$('.level-bar-inner').hover(
    function() {
       $(this).parents('.item').find('.level-label').tooltip('show');
    },
    function() {
       $(this).parents('.item').find('.level-label').tooltip('hide');
    }
);

Answer 3

您可以使用this以外的e.target。除此之外，prev元素可能就是您正在寻找的东西，然后通过它的类获得孩子：

$('.level-bar-inner').hover(
    function(e) {
        $(this).parent().prev().child(".level-label").tooltip('show');
    },
    function(e) {
        $(this).parent().prev().child(".level-label").tooltip('hide');
    }
);

Answer 4

如果您遵循向元素添加数据属性的相同结构，那么另一种方法是

$('.level-bar-inner').hover(function(e) {
$(this).closest('[data-toggle=tooltip]').tooltip('show');
}, function(e) {
$(this).closest('[data-toggle=tooltip]').tooltip('hide');
});

如何使用jQuery

4 个答案: