Question

我正在使用jQuery TOOLS - The missing UI library。对于我所有输入字段的工具提示

            $("#univers :input").tooltip({
            effect: 'slide',
            position: "center right",
            offset: [-2, 10],
            effect: "fade",
            opacity: 0.5,
            tip: '.tooltip'
        });

但我想仅在输入字段为空时显示工具提示。所以我做了

$("#univers input:text[value=""]").tooltip({ effect: 'slide', position: "center right", offset: [-2, 10], effect: "fade", opacity: 0.5, tip: '.tooltip' });

但是这个不起作用！

有什么想法吗？

Answer 1

这只会将工具提示eventlistener添加到空的字段中，当你将鼠标悬停时它不会检查它是否为空。

我对您正在使用的库不熟悉，并且您没有发布链接，但检查是否存在在显示工具提示之前调用的回调函数。然后你可以检查字段是否为空并返回true或false，这取决于是否应该显示工具提示。

修改

查看documentation for tooltip。有一个名为onbeforeshow的函数，它完成了我解释的内容。

onBeforeShow: function() { 
  return (jQuery.trim($(this).val()) == "");
}

Answer 2

这里有一些问题。

首先，它内部有双引号，这意味着它是无效的语法。您需要使用单引号，以便该值为单个字符串。

试试这个：

$("#univers input[type=text][value='']")

甚至更好：

$("#univers input:text[value='']")

您的第二个问题是选择器在填写字段时不会自动保持更新。因此，您将在页面加载时选择所有空字段，即使稍后填写，回调仍将被触发。

正如Marius所说，你需要使用onbeforeshow回调根据字段是否实际为空来启用/禁用工具提示。

这样的事情应该有效：

// don't use [value=''] because a field that isn't empty at first might be empty later
$("#univers input:text").tooltip({
    effect: 'slide',
    position: "center right",
    offset: [-2, 10],
    effect: "fade",
    opacity: 0.5,
    tip: '.tooltip',
    onBeforeShow: function() {
        return this.value == ''; 
        // will return false if the value is not empty, 
        // returning false makes the tooltip not show
    }
});

表格空输入

2 个答案:

修改