无法读取未定义的Match属性 - 无法查找功能

时间:2015-08-29 17:19:30

标签: javascript jquery regex

我有一个jQuery插件,可以通过regex更改URL中的wid参数。

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

目前这会抛出一条错误消息: 未捕获的TypeError:无法读取未定义的属性“匹配”

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>

1 个答案:

答案 0 :(得分:4)

查看插件的代码,似乎需要向方法methodName提供一个名为href的属性和resizeImage()的值的对象:

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