带有2个选择器的JQuery插件_Jquery

带有2个选择器的JQuery插件

jquery

带有2个选择器的JQuery插件,jquery,Jquery,我创建了一个JQuery工具提示插件，可以通过两种方式使用：工具提示内容是HTML锚的标题工具提示内容作为选项传递我想有另一个选择：整个工具提示标记将是页面中的一个元素让我举一个我正在寻找的例子： $（“table td.Task a.Menu”，“li div.Menu”）.Tooltip（）所以“table td.Task”下的每个链接菜单都会触发一个工具提示工具提示标记将位于a.菜单的同一LI下的div.菜单如何改变我的插件也能做到这一点？我目前的代码是： (fun

我创建了一个JQuery工具提示插件，可以通过两种方式使用：

工具提示内容是HTML锚的标题
工具提示内容作为选项传递

我想有另一个选择：

整个工具提示标记将是页面中的一个元素
让我举一个我正在寻找的例子：
$（“table td.Task a.Menu”，“li div.Menu”）.Tooltip（）
所以“table td.Task”下的每个链接菜单都会触发一个工具提示
工具提示标记将位于a.菜单的同一LI下的div.菜单

如何改变我的插件也能做到这一点？我目前的代码是：

(function ($) {

  $.fn.Tooltip = function (options) {

    var defaults = {
      content: "",
      class: "Tooltip",
      id: "Tooltip"
    };

    var options = $.extend({}, defaults, options);

    var tooltip;

    $(this).each(function () {

      var title = $(this).attr("title");
      if (title == undefined && options.content == "") return;

      $(this).mouseenter(function (e) {

        $(this).removeAttr("title")
        tooltip = "<div id='{id}' class='{class}'>{content}</div>"

        var content = options.content == "" ? title : options.content;
        tooltip = tootip.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", content);

        $("body").append(tooltip);
        $("#" + options.id).fadeIn("fast");

      }), // Mouse Enter

      // Mouse Leave, Mouse Down and Mouse Move functions ...

    }
   }

（函数（$）{
$.fn.Tooltip=函数（选项）{
var默认值={
内容：“，
类：“工具提示”，
id:“工具提示”
};
var options=$.extend（{}，默认值，选项）；
var工具提示；
$（此）。每个（函数（）{
var title=$（this.attr（“title”）；
if（title==未定义&&options.content==“”）返回；
$（此）.mouseenter（函数（e）{
$（此）.removeAttr（“标题”）
工具提示=“{content}”
var content=options.content==“”？标题：options.content；
tooltip=tootip.replace（“{class}”，options.class）.replace（“{id}”，options.id）.replace（“{content}”，content）；
$（“正文”）.append（工具提示）；
$（“#”+options.id）.fadeIn（“fast”）；
})，//鼠标输入
//鼠标左键、鼠标下键和鼠标移动功能。。。
}
}

谢谢！

不打算重写整个插件，但可以添加一个选项，从页面返回内容：

var defaults = {
      content: "",
      class: "Tooltip",
      id: "Tooltip",
      contentSource: 'title' /* "title" as default or "html" for in page*/
      htmlSource: function($el){
         /* write whatever traverse returns content wanted*/
         return  $el.siblings('div.foo').html();
      }
    };

现在，当您设置内容时，请检查哪个源

/* should cache $(this) since using it numerous times*/
var $this=$(this)


var content;
if( options.contentSource !='title'){
   content=options.htmlSource($this);
}else{
  content= /* existing code*/
}

用途：

$("table td.Task a.Menu", "li div.Menu").Tooltip({
      contentSource: 'html',
      htmlSource: function($el){            
          return  $el.parent().find('.someClass').html();
      }
});

我尝试了你的建议，但出现了一些奇怪的情况。我将DIV添加到我的页面：“Text”。在这种情况下，工具提示会显示。但是如果我有“

项1
项2

class=“.someClass”中有一个dot

var source=options.source（$（this））；

sibbins（）.html（）

未定义的

contenTsource