我正在尝试配置一个 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 );
我并没有真正上传大量代码,因为我想了解如何从概念上解决这个问题(前提是我对问题的解释很清楚)。
为了重复我的目标,即使在通过过滤器应用程序单击/键入之后,我也希望将此特定网页中的网格元素加载为相同的高度。
如果我能澄清任何其他问题,请告诉我。
最佳答案
这个答案已经解决了。我所做的(有效的)是采用这段代码:$(".grid > .grid-item").matchHeight();
并将其放入特定网页的 JavaScript 文件中用过的。这段代码是动态设置元素高度的。
关于javascript - 配置特定的 JavaScript 函数以在页面上重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39457558/