使用 Jquery Mobile 更正页面事件以修改 CSS答案

【问题标题】：Correct Page Event to Modify CSS using Jquery Mobile使用 Jquery Mobile 更正页面事件以修改 CSS
【发布时间】：2023-04-10 06:32:01
【问题描述】：

我想在页面准备好时动态更改我的 div 高度。 (document.ready)。那么我应该使用 Jquery Mobile 中的正确页面事件是什么？

尝试使用 pagebeforeshow 和 pageshow 事件。

Pagebeforeshow 事件

$(document).on 'pagebeforeshow', ->
  page_id = $.mobile.activePage[0].id

  if page_id == "brands"
    maxHeight = Math.max.apply(null, $(".product_descriptions").map(->
      $(this).height()
    ).get())

    $(".product-image").css("height", maxHeight)
    $(".circle-container").css("height", maxHeight)

最大高度返回 0

页面显示事件

$(document).on 'pageshow', ->
  page_id = $.mobile.activePage[0].id

  if page_id == "brands"
    maxHeight = Math.max.apply(null, $(".product_descriptions").map(->
      $(this).height()
    ).get())

    $(".product-image").css("height", maxHeight)
    $(".circle-container").css("height", maxHeight)

maxHeight 将返回正确的值。

虽然 pageshow 事件返回正确的值，但所有元素将首先显示，然后仅触发 .css 函数。我可以看到 .css 事件被触发并且在移动设备上看起来很奇怪（屏幕弹跳）。

有解决办法吗？

【问题讨论】：

pagebeforeshow 应该为您提供正确的高度，因为页面已完全创建。也许你应该在你的选择器中更具体$("#brands .product_descriptions")

标签： javascript jquery css jquery-mobile

【解决方案1】：

在“pageshow”和“pagehide”事件中更改 css 看起来很奇怪，是的，所以你被“pagebeforeshow”事件困住了。首先，如果您使用早于 1.7.1 的 JQuery 并尝试获取未隐藏元素的尺寸，那么您应该尝试使用较新的 JQuery。如果它没有帮助，或者您尝试获取隐藏元素的尺寸，您可以尝试一些像这样的奇怪技巧：

 // object is JQuery object (e.g. $('#myId'))
 function getRealHeight(object)
 {
     var clone = object.clone().show().css({'visibility':'hidden'}).appendTo('body');
     var realHeight = clone.height();
     clone.remove();
     return realHeight;
 }

这对我有用，即使在某些元素上它返回的尺寸不准确（例如，216 而不是最终的 232）。这种黑客攻击的更多版本：jQuery - Get Width of Element when Not Visible (Display: None)

【讨论】：