Question

我正在修复我公司从Adobe获得的自定义组件的错误。有关此组件的详细信息：它是一个轮播，导航器[carousel navigator]编号。因此，轮播使用javascript完全构建其导航器。

div <div class="carousel"><div class="pane"><div id="textimage_xyzzz"></div><div class="grotatorNav"></div></div></div>

的结构

所以错误是他们设计了'.grotatorNav'，使其“位置绝对”，“顶部为160px”，“。carousel”始终固定为'height：300px，宽度：700px'旋转器对旋转木马是绝对的，并始终在相同的高度160px。

我想通过使用'.pane'高度来调整它，因为它根据窗格中的“textimage”进行更改[文本图像是CMS作者可以调整的另一个组件]，

所以我所做的就是

var heightOfPane = $('.pane').height();
$('#'+componentId+' .gRotatorNav').css('top',heightOfPane);

} 这是正确的，因为它引入了内联样式，并且在将来我们希望所有样式和脚本都在他们自己的文件.css，.less，.js中，而不是分布在AEM中的clientlib中。

我更像是Backend工程师，但作为一名AEM开发人员，我正在接触FED水域。任何帮助将不胜感激。

Answer 1

看起来很好，只是你的jQuery代码必须在$(document).ready()内运行，以确保在开始操作元素之前完全加载DOM。

你也可以考虑使用jQuery的outerHeight()代替height()，因为后者不包括填充和边框。

$(function() {
    var heightOfPane = $('.pane').outerHeight();
    $('#'+componentId+' .gRotatorNav').css('top',heightOfPane);
});

注意：上面的语法是$(document).ready()的简写，因此您可以按原样使用它（more info）。