为什么这个JavaScript mousemove功能不起作用?

时间:2016-06-26 07:55:42

标签: javascript jquery

所以,我正在尝试使这个函数工作,所以无论它应用于什么div,pageSee类都将跟随超链接..

这就是我写的...... https://jsfiddle.net/LoorLge5/5/

<html>
<head>
<style>
    body {padding: 500px; background: #ddd; }
    .pageSee { position: absolute; float: left; }
</style>
</head>

<body id="as">

<div id="this">this is awesome</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
    $(function ()
    {   
        $('#as').divFollow({
            target: 'http://www.facebook.com/'
        });
    });

    function divFollow(settings)
    {
        return this.each(function ()
        {       
            this.append('<a class="pageSee" src="' + settings.target + '"></a>');

            this.on('mousemove', function(e)
            {
                $('.pageSee').css({
                    left: e.pageX - 5,
                    top: e.pageY - 5
                });
            });
        });
    }
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:6)

那里有几个问题:

  1. 声明全局divFollow函数不会使它成为jQuery对象的属性。为此,您可以将其添加到$.fn

    $.fn.divFollow = function() { /* ... */ };
    
  2. 在函数内each的回调中,this将不是jQuery对象,它将是一个原始DOM元素。所以你需要将它包装在一个jQuery对象中:$(this)(你在divFollow中是正确的,this是一个jQuery对象。)

  3. mousemove处理程序中,您正在找到所有 .pageSee元素并更改其CSS。您可能只想做与此特定元素相关的那个。

  4. 所以至少:

    // Put it on `$.fn`
    $.fn.divFollow = function(settings) {
        return this.each(function() {
            // Wrap `this`
            var $this = $(this);
            $this.append('<a class="pageSee" src="' + settings.target + '"></a>');
            $this.on('mousemove', function(e) {
                 // Find the .pageSee within this element only
                 $this.find('.pageSee').css({
                     left: e.pageX - 5,
                     top: e.pageY - 5
                 });
            });
        });
    };
    
    $(function() {
        $('#as').divFollow({
            target: 'http://www.facebook.com/'
        });
    });
    

    可能还有其他问题,但希望能帮到你。