javascript - 仅当满足特定条件时才执行调整大小功能

Question

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

所以我的问题是 - 只有当页面上有满足特定类/id 的元素(例如 .box-image)时，是否有一种方法可以触发此调整大小事件...使用某种条件语句？

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

编辑:它抛出错误两次，第一次是因为构造函数中的高度属性，因为这会在重新加载后设置初始高度。

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) { .. }

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'
          });
        });

      }
    });
  }
}