未能在Javascript中創建插件

-2

我是JavaScript編程新手，我試圖自己學習它。我試圖製作一個允許元素來回移動的插件，但它不起作用。任何人都可以幫助我，告訴我我的代碼有什麼問題嗎？下面是我試圖開發我的插件的代碼。未能在Javascript中創建插件

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <title>JS Bin</title> 
    </head> 
<body> 
    <a href="#" style="position:relative">Hello, world</a> 
    <img src="car.png" style="width:100px; height:60px"> 
    <p>Hello, world</p> 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
    <script> 
     (function($) 
     { 
      $.fn.showLinkLocation = function() 
      {  
       move(); 
       function move() 
       { 
        $(this).animate({left: '500px'}, 1000).animate({left: '0px'}, 1000); 
        move(); 
       }; 
      }; 
     }(jQuery)); 
     $("a").showLinkLocation(); 
    </script> 
</body> 
</html>

來源

2017-10-06 Jerry Wu

嘗試移動'（jQuery的）'括號外：'（函數（$）{...}）（jQuery的）'。另外，你裏面的'this'函數'move'將會是'window'對象。 –

也...你有一個無限循環。移動到回調中。 –

(function($) { 
 
    $.fn.showLinkLocation = function() { 
 
    this.animate({ 
 
     left: '500px' 
 
    }, 1000).animate({ 
 
     left: '0px' 
 
    }, 1000); 
 
    return this; 
 
    }; 
 
})(jQuery); 
 
$("a").showLinkLocation();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" style="position:relative">Hello, world</a>

原因：

你有，遞歸調用不會被拆散，無限循環：

function move(){ 
    ... 
    move(); 
};

說明：

使用jQuery而不是$確保與其他JavaScript庫沒有衝突。我們所有的內部代碼也應該參考jQuery而不是$。

(function($) { 
    $.fn.showLinkLocation = function() { ... }; 
})(jQuery);

此功能會立即運行，並傳遞jQuery爲一個名爲$參數。由於$是一個局部變量，因此我們可以假設它始終引用jQuery庫，而不是先取得全局變量的另一個庫。

this指jQuery的，所以我們可以直接訪問jQuery的方法，如this.each(...
return this;返回jQuery對象，以便其他方法可以鏈接

來源

2017-10-06 15:26:23

請添加一個錯誤解釋，你改變了什麼，爲什麼。 –

@DavidThomas：對不起，我更新了謝謝。 –

-1

我覺得有什麼不妥你的代碼在內部move函數中，您無法訪問其外部this變量，在此情況下，該變量是目標元素。

所以，你需要保持外部this在一個單獨的變量，所以它不會被該函數的上下文中的函數覆蓋。無論如何，我認爲Akshay Hegde的解決方案比以前更清潔。

另一個問題是，您反覆調用move()，最終會導致瀏覽器崩潰。在再次啓動之前，您應等待第一個動畫的完成。

(function($) { 
 
$.fn.showLinkLocation = function() {  
 
    var $this = this; 
 
    move(); 
 
    function move(){ 
 
    console.log("move called" + new Date().getTime()); 
 
    $this.addClass("animating").animate({left: '500px'}, 1000).animate({left: '0px'}, 1000); 
 
    //move(); 
 
    }; 
 
}; 
 
}(jQuery)); 
 
$("a").showLinkLocation();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width"> 
 
<title>JS Bin</title> 
 
</head> 
 
<body> 
 
<a href="#" style="position:relative">Hello, world</a> 
 
<img src="car.png" style="width:100px; height:60px"> 
 
<p>Hello, world</p> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
</body> 
 
</html>

來源

2017-10-06 15:27:11

請添加一個錯誤解釋，你改變了什麼，爲什麼。 –

未能在Javascript中創建插件

回答

相關問題