如何创建'JQuery'函数调用并将数据传递给它们？

Question

我使用qtip jquery插件添加工具提示。我可能会在整个网站上添加50-60个工具提示。

我发现现在这样做的方式是反复剪切/粘贴jQuery代码。例如：

// First, setup a tool tip for 'Enter Username'. 
$("input#user_login").qtip({ 
    content: 'Enter username', 
    position: { 
    corner: { 
     target: 'rightMiddle', 
     tooltip: 'leftMiddle' 
    } 
    }, 
    style: { 
    border: { 
     width: 1, 
     radius: 3, 
     color: '#0066CC' 
    }, 
    width: 200, 
    name: 'blue' 
    } 
}); 

现在，重复所有的'名字'。似乎毫无意义。

$("input#user_login").qtip({ 
    content: 'Enter First Name', 
    position: { 
    corner: { 
     target: 'rightMiddle', 
     tooltip: 'leftMiddle' 
    } 
    }, 
    style: { 
    border: { 
     width: 1, 
     radius: 3, 
     color: '#0066CC' 
    }, 
    width: 200, 
    name: 'blue' 
    } 
}); 

如何创建一个函数我可以将显示文本传递给？

Answer 1

作为一个通用的解决方案，要使用默认选项，然后扩展它任何时候，你可以用$.extend()就可以了，就像这样：

var qtip_options = { 
    content: 'I'm a tooltip, 
    position: { 
    corner: { 
     target: 'rightMiddle', 
     tooltip: 'leftMiddle' 
    } 
    }, 
    style: { 
    border: { 
     width: 1, 
     radius: 3, 
     color: '#0066CC' 
    }, 
    width: 200, 
    name: 'blue' 
    } 
}; 

$("#user_login").qtip($.extend({}, qtip_options, { content: 'Enter username'}); 
$("#first_name").qtip($.extend({}, qtip_options, { content: 'Enter First Name'}); 

---

或者在你的情况，因为你做了很多，让我们使用一个插件，像这样：

$.fn.myQtip = function(text) { 
    return this.qtip($.extend({}, qtip_options, { content: text}); 
}; 

然后就这样称呼它：

$("#user_login").myQtip('Enter username'); 
$("#first_name").myQtip('Enter First Name'); 

Answer 2

function setupToolTip(jQueryElement, display) { 
    jQueryElement.qtip({ 
    content: display, 
    position: { 
     corner: { 
     target: 'rightMiddle', 
     tooltip: 'leftMiddle' 
     } 
    }, 
    style: { 
     border: { 
     width: 1, 
     radius: 3, 
     color: '#0066CC' 
     }, 
     width: 200, 
     name: 'blue' 
    } 
    }); 
} 

setupToolTip($("input#user_login"), 'Enter username'); 
setupToolTip($("input#user_first_name"), 'Enter First Name'); 

Answer 3

如果所有其他选项（如样式和宽度）对于所有工具提示都是相同的，我会建议更改插件代码中的默认值。这将允许你做出这样的提示：

$("input#user_login").qtip({content: "Enter username"}); 
$("input#user_password").qtip({content: "Enter password"}); 

Answer 4

而不是定位特定的元素，您可以按类别一次性定位所有元素。然后，您将这些值隐藏在HTML中。这样您只需要一个电话即可设置qTip并自动查找您的内容。随着更多元素的添加，您无需修改​​脚本，只需给他们一类“hasTip”即可完成设置。

$(".hasTip").qtip({ 
    content: $(this).next('.tipText').html(), 
    ... 

在HTML（地方，有一类 “hasTip” 的元素在此之后右）：

<div class='tipText' style='display:none">First Name</div> 

一次编写，到处使用。

编辑：

尼克，你是正确的，我的 “this” 引用是错误的。我确实相信像这样的工具的“自我发现”。他们只需找到自己的内容，并且无需干预就可以自己动手。

我不认为这是“标记超标”超过$("#user_login").qtip($.extend({}, qtip_options, { content: 'Enter username'});是“函数调用过度杀伤”。他们只是解决问题的不同方式。

我喜欢我的方法，因为我可以“包含并忘记”，并且永远不必编写元素特定的初始化。