Question

我创建了一个JQuery工具提示插件，我将它应用于几个A标签。

对于每个A标签，应该有一个与之关联的不同工具提示，所以我有：

var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');

工具提示ID包含如下创建的随机数：

id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000)

该插件表现不佳。我检查了添加到页面的HTML。

页面中只添加了一个工具提示...始终相同。

我该如何解决这个问题？我究竟做错了什么？我有一个例子：http://codepen.io/mdmoura/pen/wgapv

插件代码如下：

$(document).ready(function () {
  $("table a").Tooltip(); 
});

// Tooltip
(function ($) {

  $.fn.Tooltip = function (options) {

    var defaults = {          
      class: 'Tooltip',
      delay: [200, 200],
      offset: [0, -10],
      hide: function ($element, $tooltip) {
        $tooltip.fadeOut(200);
      },
      show: function ($element, $tooltip) {
        $tooltip.fadeIn(200);
      }
    };

    var options = $.extend({}, defaults, options);   
    var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' };

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

      var $this = $(this);
      tooltip.title = $this.attr('title') || '';

      $this.mouseenter(function (e) {                  

        if (tooltip.ready) {
          var $tooltip = $("#" + tooltip.id);
        } else {
          var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
          $tooltip.html(tooltip.title);
          tooltip.ready = true;
          $this.attr('title', '');
        }

        var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];

        $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });

        tooltip.timer = window.setTimeout(function () {
          options.show($this, $tooltip.stop(true, true));
        }, options.delay[0] || 0);

        $("#" + tooltip.id).mouseenter(function () {
          window.clearTimeout(tooltip.timer);
          tooltip.timer = null;
        }); // Tooltip enter

        $("#" + tooltip.id).mouseleave(function () {
          tooltip.timer = setTimeout(function () {
            options.hide($this, $tooltip);
          }, 0);
        });

      }), // Mouse enter

      $this.mouseleave(function (e) {
        tooltip.timer = setTimeout(function () {
          options.hide($this, $("#" + tooltip.id).stop(true, true));
        }, options.delay[1] || 0);
      }) // Mouse leave  

    }); // Each

  }; // Tooltip

})(jQuery); // JQuery

HTMl如下：

<table>
  <tr><td><a href="#" title="Tooltip 01 Text">Tooltip 01</a></td></tr>
  <tr><td><a href="#" title="Tooltip 02 Text">Tooltip 02</a></td></tr>
  <tr><td><a href="#" title="Tooltip 03 Text">Tooltip 03</a></td></tr>
  <tr><td><a href="#" title="Tooltip 04 Text">Tooltip 04</a></td></tr>
  <tr><td><a href="#" title="Tooltip 05 Text">Tooltip 05</a></td></tr>
</table>

谢谢！

Answer 1

您在var tooltip循环之外定义了this.each，这意味着只有一个tooltip个实例

(function ($) {

  $.fn.Tooltip = function (options) {

    var defaults = {          
      class: 'Tooltip',
      delay: [200, 200],
      offset: [0, -10],
      hide: function ($element, $tooltip) {
        $tooltip.fadeOut(200);
      },
      show: function ($element, $tooltip) {
        $tooltip.fadeIn(200);
      }
    };

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

    $(this).each(function (e) {     
        //moved this inside the loop
        var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' };

      var $this = $(this);
      tooltip.title = $this.attr('title') || '';

      $this.mouseenter(function (e) {                  

        if (tooltip.ready) {
          var $tooltip = $("#" + tooltip.id);
        } else {
          var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
          $tooltip.html(tooltip.title);
          tooltip.ready = true;
          $this.attr('title', '');
        }

        var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];

        $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });

        tooltip.timer = window.setTimeout(function () {
          options.show($this, $tooltip.stop(true, true));
        }, options.delay[0] || 0);

        $("#" + tooltip.id).mouseenter(function () {
          window.clearTimeout(tooltip.timer);
          tooltip.timer = null;
        }); // Tooltip enter

        $("#" + tooltip.id).mouseleave(function () {
          tooltip.timer = setTimeout(function () {
            options.hide($this, $tooltip);
          }, 0);
        });

      }), // Mouse enter

      $this.mouseleave(function (e) {
        tooltip.timer = setTimeout(function () {
          options.hide($this, $("#" + tooltip.id).stop(true, true));
        }, options.delay[1] || 0);
      }) // Mouse leave  

    }); // Each

  }; // Tooltip

})(jQuery);

演示：CodePen

向页面添加多个元素

1 个答案: