Question

我被困了几个小时，无法弄清楚原因。我需要实现的很简单，我有一些“tr”，每个td都有一个唯一的头名。根据标题名称，我需要为每个“td”单元格显示工具提示。我之前已经成功实现了qtip，所以我知道如何配置它。但是，问题是qtip根本不起作用，即使是简单的内容。有线的是，控制台中没有错误信息，所以我不知道为什么。

这是JS：

$(document).ready(function () {

    var hoverElem = null;
    $("table.confirmit-grid.borderseparate tbody tr td").on('click mouseover', function (e) {
        hoverElem = this;
        if ($(hoverElem).attr('headers') == 'non_import_header1') {
            $(hoverElem).qtip({
                content: {
                    text: 'hello'
                }

            });
        }

    });

HTML部分在JSFiddle中。 http://jsfiddle.net/matildayipan/2yztzdgc/

任何人都可以帮助我吗？我真的很感激〜

Answer 1

似乎

$（“table.confirmit-grid.borderseparate tbody tr td”）。length

返回0，因此qtip不会应用于任何元素。问题出现是因为类名中的点。通过转义选择器中的点可以避免这种情况：

$("table.confirmit-grid\\.borderseparate tbody tr td")

实际上，这就是我如何编写它（无需重新定义click / mouseover事件，这是由qtip函数自动完成的）：

$(document).ready(function () {
var hoverElem = null;
$("table.confirmit-grid\\.borderseparate tbody tr td").each(function( index ) {
    if ($(this).attr("headers") == "non_import_header1") {
        $(this).qtip({
            content: {
                text: 'hello'
            }
        });
    }
});

[编辑]为什么这种语法有效：

执行$("yourSelector").qtip({content:{text:"Hello !"}});时，它的作用是将工具提示插件应用于与选择器匹配的所有元素。调用的插件构造函数为您完成所有工作，并创建正确的事件处理程序，因此您不必自己执行此操作。

您的代码问题在于它每次都尝试创建一个新的qtip 进行点击/鼠标悬停，而不是创建一次然后显示它。我的猜测是，由于事件处理程序创建了一个新插件，它会阻止先前创建的qtips显示，因此不会出现任何内容。

请注意，在这种情况下我使用了.each()因为条件$(this).attr("headers") == "non_import_header1"，但实际上我很懒，因为我很确定attribute condition可以集成到元素中选择器像那样：

$("table.confirmit-grid\\.borderseparate tbody tr td[headers='non_import_header1']").qtip({
            content: {
                text: 'Hello ! Yay for short code !'
            }
        }
);

Answer 2

你的

$("table.confirmit-grid.borderseparate tbody tr td")

没有在控制台中提供任何元素，因为您之前的选择器正在使用类。这将被视为另一个类。例如例如myclass.anotherClass它将提供此元素

<div class="myClass anotherClass">

所以我将选择器更改为

$（＆＃34; table tbody tr td＆＃34;）。on（＆＃34; click＆＃34;，function（）{}）

jquery qtip无法正常工作，但在控制台中没有错误

2 个答案: