两个jquery插件，第二个不工作

Two jquery pluggin, the second to not work

本文关键字：工作 第二个 jquery 插件 两个      更新时间：2023-09-26

我有一个简单的html文件，带有一个标题和两个空的div

<h1>Blablabla.</h1>
<div id="div1"></div>
<div id="div2"></div>

这两个div必须填充一些由jquery SVG库（由Keith Wood开发）生成的SVG包含。对于那个标题，我包含了这些脚本

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="./jquery.svg.package-1.4.5/jquery.svg.js"></script>
  <script type="text/javascript" src="./myscript.svg.js"></script>

然后看看 myscript.svg.js，它是一个 jquery 代码，它的 ready 函数将 plugin1 附加到div1，插件 2 附加到div2，并调用 publiv 函数 generateSvg 

$(document).ready(function(){
  $('#div1').plugin1({'param': '5'});
  $('#div1').data('plugin1').generateSvg();
  $('#div2').plugin2();
  $('#div2').data('plugin2').generateSvg();
});

其中插件 1 和插件 2 是根据样板编写的两个 jquery 插件

(function($) {
  $.plugin1 = function(element, options) {
    var defaults = {
      param: '5'
      onFoo: function() {}
    }
    var plugin = this;
    plugin.settings = {}
    var $element = $(element), element = element;
    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
    }
    plugin.generateSvg = function() {
      $element.svg();
      var svg = $element.svg('get');
      var defs = svg.defs();
      generate1Svg(svg);
    }
    var generate1Svg = function(svg) {
      ... etc ... 
    }
    plugin.init();
  }
  $.fn.plugin1 = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('plugin1')) {
        var plugin = new $.plugin1(this, options);
        $(this).data('plugin1', plugin);
      }
    });
  }
})(jQuery);
(function($) {
  $.plugin2 = function(element, options) {
    var defaults = {
    }
    var plugin = this;
    plugin.settings = {}
    var $element = $(element), element = element;
    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
alert('coucou');
    }
    plugin.generateSvg = function() {
alert('toto');
      $element.svg();
      var svg = $element.svg('get');
      var defs = svg.defs();
      generate2Svg(svg);
    }
    var generate2Svg = function(svg) {
      ... etc ... 
    }
    plugin.init();
  }
  $.fn.plugin2 = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('plugin2')) {
        var plugin = new $.plugin2(this, options);
        $(this).data('plugin2', plugin);
      }
    });
  }
})(jQuery);

我的问题是：插件 1 中编码的 svg 绘图生成良好，但插件 2 中编码的 svg 绘图不会出现。甚至警报消息也不会显示。如果我尝试为div1 和div2 使用 plugin1，它不会在div2 中生成如果我不为div1 调用插件 1 并为div2 调用插件 2，没问题，出现插件 2 中编码的 svg 绘图

javascript 运行时出现语法错误：

resetSize is not defined on line 100.

该语法错误会阻止任何后续代码运行，并且因为它在第一个div 的内容生成结束时有效，但第二个div 的代码无法运行。当您注释掉第一个div 的代码时，您可以停止发生语法错误，并且第二个div 可以正常工作。

相关文章：