僅在滿足特定條件時才執行調整大小功能

Question

我正在動態調整一些框的大小，這個功能放在我的Images模塊中。 它運行良好，但由於這些框只出現在網站的一個部分，它會拋出一個錯誤，它無法讀取未定義的高度屬性，這是顯而易見的，因為捆綁的文件觸發window.resize但不是找到阻止我的其他功能/模塊的盒子。

所以我的問題是 - 只有當頁面上有元素滿足某個類/ id（例如.box-image）時才有一種方法來觸發這個resize事件......帶有某種條件語句？

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

編輯：它拋出錯誤兩次，第一次是因為構造函數中的高度屬性，因為這會在重新加載后設置初始高度。

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

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

我想這只是你的每個循環都不起作用......

我假設您只想在其中包含具有box-image類的元素時更改具有content-box類的元素的height 。

首先，在該循環中不需要$()圍繞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()做過） 。