javascript - 配置特定的 JavaScript 函数以在页面上重新加载

Question

我正在尝试配置一个 JavaScript 函数以在特定网页上进行某种“重新加载”。该站点有一个总体 JS 和 CSS 框架，但我只是希望这个特定功能的加载方式有所不同。

JS框架中的JS函数动态设置网格元素的高度。例如，如果我有三个高度分别为 155px、34px 和 100px 的元素，它会采用具有最高值的元素并将该高度应用到所有网格元素，使它们全部为 155px。

对于站点中的其余页面，代码没有问题，因为 JS 脚本在页面加载时执行。但是，我正在使用该函数的页面似乎不遵守 JS 脚本。当它应该具有相同的高度时，它仍然保持不同的高度。

此特定页面的不同之处在于其中编码的应用程序。页面中有一个过滤应用程序，具有一个搜索文本框和一个复选框，类似于亚马逊针对男装或女装等类别的应用程序过滤器。然而，与 Amazon 不同的是，选中/取消选中复选框或在搜索框中键入其他内容只会加载/重新加载“内容”，但页面实际上不会重新加载，内容只是链接。这些链接是从单独的 XML 文件加载的。

本例中的链接是网格元素。它们被设置为看起来像交互式按钮。

这是 JS 函数的代码:

(function ($, window, document, undefined ) {

'use strict';

// add initialisation
this.addInitalisation('equal-heights', function() {

    this.debug('Module: Equal Heights');

    var font = new FontFaceObserver('BentonSansRegular');

   font.load().then(function () {
      // console.log('Font is available');
      $(".grid > .grid-item").matchHeight();
    });
});

// Register UI module
this.UIModule({
    module: 'equal-heights',
    init: function() {
        this.initialize('equal-heights');
    }
}); 
})( jQuery, window, window.document );

我并没有真正上传大量代码，因为我想了解如何从概念上解决这个问题(前提是我对问题的解释很清楚)。

为了重复我的目标，即使在通过过滤器应用程序单击/键入之后，我也希望将此特定网页中的网格元素加载为相同的高度。

如果我能澄清任何其他问题，请告诉我。

Answer 1

这个答案已经解决了。我所做的(有效的)是采用这段代码:$(".grid > .grid-item").matchHeight(); 并将其放入特定网页的 JavaScript 文件中用过的。这段代码是动态设置元素高度的。