Question

我有以下JQuery插件：

$(function () {

  $.fn.mapit = function (position, styles) {

    var self = $(this);

    var map = new google.maps.Map(self[0], {
      center: position,
      styles: styles
    });

    var marker = new google.maps.Marker({
      position: position,
      map: map
    });

    return $(this);

  }  
});

我用以下的方式称呼它：

google.load("maps", "3", callback: function() {    

  $("div#office").mapit({ lat: 38.73972, lng: -9.144263 }, [{"featureType":"all"}]);

});

问题是，当我调用mapit并且页面上没有div＃office时，我收到以下错误：

TypeError: a is undefined

我应该在插件中做些什么来避免这种情况？

Answer 1

由于代码是您自己的插件，您可以通过添加

来扩展插件以处理多个选择器/元素

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

到插件的顶部：

$(function () {
  $.fn.mapit = function (position, styles) {

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

      var self = this;

      var map = new google.maps.Map(self, {
        center: position,
        styles: styles
      });
      var marker = new google.maps.Marker({
        position: position,
        map: map
      });
    }
  }  
});

有关详细信息，请参阅插件教程，具体来说，请使用each方法：

https://learn.jquery.com/plugins/basic-plugin-creation/#using-the-each-method

然后，如果div#office不存在，那么循环中什么都没有，一切都很好。

使用没有元素的JQuery插件时，“TypeError：a未定义”

1 个答案: