jQuery方向改变不工作

时间:2016-03-24 17:21:08

标签: jquery orientation screen-orientation device-orientation

这是我的代码:

jQuery(window).on("orientationchange",function(){
   var maxHeight = -1;
   jQuery('.article .articleHead').each(function() {
     maxHeight = maxHeight > jQuery(this).height() ? maxHeight : jQuery(this).height();
   });
   jQuery('.article .articleHead').each(function() {
     jQuery(this).height(maxHeight);
   });
   alert("The orientation has changed!");
});

我想要做的只是在方向改变时运行该代码。里面的代码只是获得最高的指定元素,然后设置所有其他元素以匹配具有内联样式的高度。

但这不起作用。我得到的只是提醒信息。什么都没有调整。

jQuery(document).ready(function() {

});

以上工作正常。当页面加载时,它会相应地设置所有内联高度样式。

我知道我错过了某些东西或试图以错误的方式使用它。非常感谢任何帮助。

阿贡

1 个答案:

答案 0 :(得分:0)

当方向更改事件触发时,您的DOM可能尚未就绪。

添加一个延迟,以便整个DOM可用于jQuery:

jQuery(window).on("orientationchange",function(){
  setTimeout(function () {

   var maxHeight = -1;
   jQuery('.article .articleHead').each(function() {
     maxHeight = maxHeight > jQuery(this).height() ? maxHeight : jQuery(this).height();
   });
   jQuery('.article .articleHead').each(function() {
     jQuery(this).height(maxHeight);
   });
   alert("The orientation has changed!");
    }, 200);

});

您可以试验除200以外的其他值。

希望它有所帮助。