javascript - 如何创建 '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');