属性在生产服务器上未定义,但适用于开发

时间:2015-06-17 08:36:00

标签: javascript jquery wordpress

我们已经在我们的wordpress主题中实现了一个灯箱,它在我们的开发服务器上完美运行,该服务器与我们的实时站点位于同一服务器上,并且构建与我的开发构建完全相同网站刚刚从实时网站备份中获取,但由于某些原因我在某些页面上遇到以下错误,但在其他网站上我并不觉得JS在这个JS文件之前没有加载但是我不知道#39;理解为什么每次在开发服务器上都能完美运行:

  

未捕获的TypeError:无法读取属性' imageUrl'未定义的

jQuery(document).ready(function( $ ) {

var WHLightbox = {

  settings: {
    overlay: $('.portfolio-tile--overlay'),
    imageCell: $('.cell-image, .portfolio-tile--image')
  },

  data: {
    images: []
  },

  init: function() {
    this.events();
    this.buildImageData();
  },

  events: function() {
    var self = this;
    this.settings.imageCell.on('click tap', function(e) {
      e.preventDefault();
      e.stopPropagation();

      // set up the overlay
      //self._positionOverlay();
      self._openOverlay();
      self._preventScrolling();

      // create the image slide
      self._createImageSlide($(this));


    });
    $('.portfolio-tile--overlay--close').on('click tap', function(e) {
      e.preventDefault();
      e.stopPropagation();
      self._closeOverlay();
    });
    $('.portfolio-tile--overlay--controls--prev, .portfolio-tile--overlay--controls--next').on('click tap', function(e) {
      e.preventDefault();
      e.stopPropagation();
    });

    $('.portfolio-tile--overlay--controls--prev').on('click tap', function(e) {
      e.preventDefault();
      e.stopPropagation();
      self.showPrev();
    });

    $('.portfolio-tile--overlay--controls--next, .portfolio-tile--overlay').on('click tap', function(e) {
      e.preventDefault();
      e.stopPropagation();
      self.showNext();
    });
  },


  // public functions
  showPrev: function() {
    var index = this.currentImageIndex();
    if(index === 0) {
      index = this.data.images.length;
    }
    this._createImageSlide(false, index-1);
  },
  showNext: function() {
    var index = this.currentImageIndex();
    if(index === this.data.images.length-1) {
      // set to -1 because it adds 1 in the _createImageSlide call
      index = -1;
    }
    this._createImageSlide(false, index+1);
  },

  currentImageIndex: function() {
    if(this.settings.overlay.hasClass('open')) {
      var imageUrl = $('.portfolio-tile--main-image').attr('src');

      for(var i=0; i<this.data.images.length; i++) {
        if(this.data.images[i].imageUrl === imageUrl) {
          return i;
        }
      }

    } else {
      return false;
    }
  },


  // image data
  buildImageData: function() {
    var self = this,
        i = 0;
    this.settings.imageCell.each(function() {
      self.data.images[i] = {
        imageUrl: self._getImagePath($(this))
      }
      i++;
    });
  },


  // slide
  _createImageSlide: function($el, index) {
    var imagePath;
    if(!$el) {
      imagePath = this.data.images[index].imageUrl;
    } else {
      imagePath = this._getImagePath($el);
    }
    this.settings.overlay.find('.portfolio-tile--main-image').attr('src', imagePath);
  },

  _getImagePath: function($el) {
    var imagePath,
        spanEl = $el.find('span.js-cell-image-background'),
        imgEl = $el.find('img.cell-image__image');
    if(spanEl.length) {
      imagePath = spanEl.css('backgroundImage');
      imagePath = imagePath.replace(/url\(["]*/,'').replace(/["]*\)/,'');
    } else if(imgEl.length) {
      imagePath = imgEl.attr('src');
    }

    return imagePath;

  },

  // overlay
  //_positionOverlay: function() {
  //  this.settings.overlay.css({
  //    position the overlay to current scroll position
  //      top: $(window).scrollTop()
  //   });
  //},
  _openOverlay: function() {
    this.settings.overlay.addClass('open');
  },
  _preventScrolling: function() {
    $('html, body').addClass('no-scroll');
  },
  _reInitScrolling: function() {
    $('html, body').removeClass('no-scroll');
  },
  _closeOverlay: function() {
    this.settings.overlay.removeClass('open');
    this._reInitScrolling();
  }
};

WHLightbox.init();

});

0 个答案:

没有答案