Question

我正在动态调整某些框的大小，此功能放在我的Images模块中。它运行良好，但由于这些框只出现在网站的一个部分，它会抛出一个错误，它无法读取未定义的高度属性，这很明显，因为捆绑的文件会触发window.resize但是没有找到阻止我的其他功能/模块的盒子。

所以我的问题是 - 只有在页面上有符合特定类/ ID的元素（例如.box-image）时，才有办法触发此调整大小事件...有条件的陈述？

非常感谢所有可能的提示。

编辑：由于构造函数中的height属性，它首次抛出错误两次，因为这会在重新加载后设置初始高度。

class Images {
    constructor() {
        //make boxes same size as images initally and on resize
        var images = $('.box-image');
        var imageHeight = images[0].height;
        var boxes = $('.content-box');
        $(boxes).css({'height': imageHeight + 'px'});
        this.events();
    }

    events() {
       $(window).resize(function() {
            var images = $('.box-image');
            var imageHeight = images[0].height;
            var boxes = $('.content-box');

            if(images.length > 0) {
                $(boxes).each(function (i, element) {
                    $(element).css({'height': imageHeight + 'px'});
                });
            }
        });
    }
}

Answer 1

使用变量前的简单检查：

if (images && images.length > 0) { .. }

＆＃13;

class Images {
  constructor() {
    //make boxes same size as images initally and on resize
    var images = $('.box-image');
    if (images && images.length > 0) {
      var imageHeight = images[0].height;
      var boxes = $('.content-box');
      $(boxes).css({
        'height': imageHeight + 'px'
      });
      this.events();
    }
  }

  events() {
    $(window).resize(function() {
      var images = $('.box-image');
      if (images && images.length > 0) {
        var imageHeight = images[0].height;
        var boxes = $('.content-box');

        $(boxes).each(function(i, element) {
          $(element).css({
            'height': imageHeight + 'px'
          });
        });

      }
    });
  }
}

＆＃13;

Answer 2

将var imageHeight = images[0].height;带入您的if语句

class Images {
    constructor() {
        //make boxes same size as images initally and on resize
        var images = $('.box-image');
        var imageHeight = images[0].height;
        var boxes = $('.content-box');
        $(boxes).css({'height': imageHeight + 'px'});
        this.events();
    }

    events() {
       $(window).resize(function() {
            var images = $('.box-image');
            var boxes = $('.content-box');

            if(boxes && images.length > 0) {
                var imageHeight = images[0].height;
                $(boxes).each(function (i, element) {
                    $(element).css({'height': imageHeight + 'px'});
                });
            }
        });
    }
}

Answer 3

我想这只是你的每个循环都不起作用......

我假设您只想在其中包含height类的元素时更改content-box类的box-image元素。

首先，在该循环中$()周围不需要element ...

element是一个变量，它保存content-box元素，而循环遍历boxes变量持有的集合。

class Images {
  constructor() {
    // Make boxes same size as images initally and on resize
    var images = $('.box-image');
    var imageHeight = images.height();
    var boxes = $('.content-box');
    boxes.css({'height': imageHeight + 'px'});
    this.events();
  }

  events() {
   $(window).resize(function() {
      var images = $('.box-image');
      var boxes = $('.content-box');

      // If there is at least one image in the page
      if(images.length > 0) {

        // Loop all content-box
        boxes.each(function (i, element) {

          // Check if it has a box-image child
          var childImage = element.find("'.box-image'");
          if( childImage.length > 0 ){
            var imageHeight = childImage.height();
            element.css({'height': imageHeight + 'px'});
          }
        });
      }
    });
  }
}

$()也不需要boxes，因为这已经是一个有效的jQuery集合了。
（您也在constructor()）。

仅在满足特定条件时执行调整大小功能

3 个答案: