javascript - 无法读取未定义的匹配属性 - 找不到函数

Question

我有一个 jQuery 插件，它通过正则表达式更改 URL 中的 wid 参数。

但是，有一个初始函数 resizeMethod 会触发，但它依赖于另一个函数来替换 url。

当前抛出一条错误消息: 未捕获的类型错误:无法读取未定义的属性“匹配”

Jsfiddle:http://jsfiddle.net/jagmitg/bq3oov2e/

(function($) {

  $.fn.resizeImage = function(options) {

    var defaults = {
      sizing: 1,
      methodName: 'src',
      regex: /wid=\d+(\.\d)*/g,
      imageSize: [2000, 1824, 1024, 767, 480]
    };

    var _se = $.extend(defaults, options);

    var $el = this,

      resizeMethod = function() {
        var src = $el.attr(_se.methodName),
          currentWidth,
          newWidth,
          newSrc = {};

        if ($(window).width() > 1824) {
          sizingMethod(src, _se.regex, currentWidth, newWidth, newSrc, Math.round(1824 / _se.sizing));
        } else if ($(window).width() <= 1824 && $(window).width() > 1366) {
          sizingMethod(src, _se.regex, currentWidth, newWidth, newSrc, Math.round(1366 / _se.sizing));
        } else if ($(window).width() <= 1366 && $(window).width() > 767) {
          sizingMethod(src, _se.regex, currentWidth, newWidth, newSrc, Math.round(767 / _se.sizing));
        } else if ($(window).width() <= 767 && $(window).width() > 480) {
          sizingMethod(src, _se.regex, currentWidth, newWidth, newSrc, Math.round(480 / _se.sizing));
        } else if ($(window).width() <= 480) {
          sizingMethod(src, _se.regex, currentWidth, newWidth, newSrc, Math.round(250 / _se.sizing));
        }

        $el.attr(_se.methodName, newSrc.src);
      },

      sizingMethod = function(sSrc, sRegex, sCurrentW, sNewW, sNewSrc, sNewWidth) {

        sCurrentW = sSrc.match(sRegex);
        sNewW = 'wid=' + sNewWidth;
        sNewSrc.src = sSrc.replace(sCurrentW, sNewW);
        textWidth = sNewW.replace('wid=', '');

      },

      init = function() {
        for (i = 0; i < $el.size(); i++) {
          //console.log($el.text());
          resizeMethod();
        }
      };

    init();
    return $el;
  }
})(jQuery);

$(window).resize(function() {
  console.log('resizing');
  $('.testClass').resizeImage();
  $('.testClassTwo').resizeImage();
});

a {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ccc;
}

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

<a href="http://testing1.com/maintest?wid=300" class="testClass">Testing</a>
<a href="http://testing2.com/maintest?wid=300" class="testClass">TestingTwo</a>
<a href="http://testing3.com/maintest?wid=400" class="testClassTwo">TestingThree</a>
<a href="http://testing4.com/maintest?wid=300" class="testClassTwo">TestingFour</a>

Answer 1

查看您的插件代码，您似乎需要提供一个对象，该对象具有名为 methodName 的属性和 href 的值给方法 resizeImage():

$(window).resize(function() {
    console.log('resizing');
    $('.testClass').resizeImage({methodName:'href'});
    $('.testClassTwo').resizeImage({methodName:'href'});
});