Question

由于屏幕尺寸的原因，当幻灯片显示较小时，我正在使用一些JS代码来自动调整按钮的高度。它在Chrome控制台中使用时有效，但在插入网站时失败。

网站：http://www.incensu.co.uk/

您可以看到我放置代码的位置，因为它已在/js/main.js的底部注释掉了，此处仅供参考：

var homeTopMain = $('#homeTopMain');
if (homeTopMain) {
  var btnHeight = (homeTopMain.height()+20)/3-20; // 20px at bottom, 3 buttons, 20px between.
  $('.btnFlapsBodyWrapper').height(btnHeight);
  $('.btnFlapsRed').height(btnHeight);
  $('.btnFlapsGrey').height(btnHeight);
}

我在想，也许这是代码的时间安排或范围问题，但我只是因为某种原因没有看到它。也许有头脑清醒的人可以发现问题？

Answer 1

Zak的小贴士指出了我正确的方向。在DOM中将它移到上面并不能保证一个ready（）会在另一个完成之后发生。正确的解决方案是从$（document）.ready（）块中删除代码并将其放在$（window）.load（）块中。

Answer 2

您可以在DOM准备就绪时调整按钮的大小，并在窗口调整大小时执行。

$(document).ready(function()
{
    function ResizeButton()
    {
        var homeTopMain = $('#homeTopMain');
        if (homeTopMain) {
          var btnHeight = (homeTopMain.height()+20)/3-20; // 20px at bottom, 3 buttons, 20px between.
          $('.btnFlapsBodyWrapper').height(btnHeight);
          $('.btnFlapsRed').height(btnHeight);
          $('.btnFlapsGrey').height(btnHeight);
        }
    }
    ResizeButton();
    $(window).resize(ResizeButton);
});

JS高度调整应该工作

2 个答案: