当前位置：文江博客话题详情

使用 jQuery 调整动态元素大小无法正常工作

发布于 2024-11-29 01:55:02 字数 211 浏览 0 评论 0原文

在这里查看我的问题：

http://jsfiddle.net/89sq2/

应该发生的是月份图例应该适合底部。如果您手动调整窗口大小（因为它触发正确的事件处理程序），就会发生这种情况，但在第一个页面加载时不会这样做。你能弄清楚为什么吗？

谢谢你！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鱼窥荷 2024-12-06 01:55:02

这很奇怪..我认为你的调整大小函数有问题..无论出于何种原因，当我调用它一次时它不起作用..两次不会产生完全的结果，但3次有效：

$(function() {
  $(document).ready(function() {
    var resize;
    $('.interval-view').wrapInner('<div class="column" />');
    $('.column').wrapInner('<div class="inner-column" />');
    $('#contents, #footers').append('<div class="clearfix"></div>');
    $('.interval-view:even').css('background-color', '#F9F9F9');
    $('.interval-view:odd').css('background-color', '#DDD');
    $('#footers').css('background-color', '#CCC');
    resize = function() {
      $('.column').height($(window).height() - $('#filter-list').outerHeight(true) - $('#footers').outerHeight(true));
      $('#timeline-panel').width($(window).width());
      return $('#timeline-panel .scrollable-area').width("" + ($('.interval-view').length * $('.interval-view').width()) + "px");
    };
    window.onorientationchange = function() {
      return resize();
    };
    $(window).resize(function() {
        console.log("Resizing");
      return resize();
    });

      $(window).resize();
      $(window).resize();
      $(window).resize();
  });
});

我们不在手动调整窗口大小时会看到问题，因为在调整大小期间会多次触发该事件（想象一下在调整大小时每次鼠标移动一个像素时都会触发该事件）。您可以在这里看到它 http://jsfiddle.net/89sq2/14/

This is weird.. I think there is a problem in your resize function.. For whatever reasons, it doesn't work when I call it once.. Twice doesn't produce quite the result but 3 times works:

$(function() {
  $(document).ready(function() {
    var resize;
    $('.interval-view').wrapInner('<div class="column" />');
    $('.column').wrapInner('<div class="inner-column" />');
    $('#contents, #footers').append('<div class="clearfix"></div>');
    $('.interval-view:even').css('background-color', '#F9F9F9');
    $('.interval-view:odd').css('background-color', '#DDD');
    $('#footers').css('background-color', '#CCC');
    resize = function() {
      $('.column').height($(window).height() - $('#filter-list').outerHeight(true) - $('#footers').outerHeight(true));
      $('#timeline-panel').width($(window).width());
      return $('#timeline-panel .scrollable-area').width("" + ($('.interval-view').length * $('.interval-view').width()) + "px");
    };
    window.onorientationchange = function() {
      return resize();
    };
    $(window).resize(function() {
        console.log("Resizing");
      return resize();
    });

      $(window).resize();
      $(window).resize();
      $(window).resize();
  });
});

We don't see the problem while resizing manually the window since the event is trigered several time during a resize (think of it being triggered every time your mouse move one pixel while resizing). You can see it live here http://jsfiddle.net/89sq2/14/

回复收藏 0 原文