Question

首先是我正在研究的JSFiddle

我创建了一个名为sopopup的新插件

做什么是将一个元素作为弹出窗口匹配，当文本悬停时，该弹出窗口会出现在某些文本周围。

当要悬停的元素的选择器是单个元素

时，它可以正常工作

 $('#message').sopopup({ target: $('#ho')});

弹出窗口显示在文本的正上方，但当选择器有多个项目时，它总是悬停在第一个项目上。

 $('#message2').sopopup({ target: $('.meds')});

我的问题出现在悬停事件的代码中。

settings.target.hover( //where target are the elements selected such as $('.meds')
        function() { 
            //here is my problem the var this is not the target being hovered
            //the var this is refering to the settings it seems

            var pos;
            var hgt;

            if(settings.location === 'top'){
                pos = settings.target.position();
                //i wanted to do this.position() but that show an error
                hgt = settings.pop.height();

                settings.pop.css({
                    position: "absolute",
                    top: (pos.top - hgt) + "px",
                    left: pos.left + "px"
                });
            }
            else if( settings.location === 'bottom'){
                pos = settings.target.postion();
                hgt = settings.target.height();

                settings.pop.css({
                    position: "absolute",
                    top: (pos.top + hgt) + "px",
                    left: pos.left + "px"
                });

            }

            settings.pop.show();
        }.bind(settings)

我无法使用变量this来引用当前正在悬停的项目。相反，hoverIn函数中的变量似乎引用了设置对象。

任何帮助表示感谢。

Answer 1

这个fork of your Fiddle使用$.each的组合并设置一个名为self的变量来引用相应的this（用jQuery包装）来实现我相信它是你＆＃39;要求：

$.each(settings.target, function(){
    var self = $(this);
    self.hover(function() {           
      var pos;
      var hgt;

      if(settings.location === 'top'){
          pos = self.position();
          [...]

无法获取当前元素悬停

1 个答案: