需要改变方向的jQuery帮助答案

【问题标题】：orientation change jquery help needed需要改变方向的jQuery帮助
【发布时间】：2013-07-31 05:31:35
【问题描述】：

基于此 URL 上的代码：http://api.jquerymobile.com/orientationchange/

我尝试更改它，以便它可以在每个方向显示不同的图像。使用$("#someID").html(< img src.../ >); 效果很好但由于某种原因，我无法使用 .addClass 使其正常工作

有人可以告诉我为什么以下内容似乎除了空白屏幕之外什么都没有产生吗？

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>orientationchange demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
    .landscape {
        background-image:url('images/landscape.jpg');
    }
    .portrait {
        background-image:url('images/portrait.jpg');
    }
</style>
</head>
<body>
<div id="orientation" class="landscape"></div>
<script>
// Bind an event to window.orientationchange that, when the device is turned,
// gets the orientation and displays it to on screen.
$( window ).on( "orientationchange", function( event ) {
    if (event.orientation=="landscape") {
        //$("#orientation").removeClass("portrait");
        $("#orientation").addClass("landscape");
        return false;
    } else if (event.orientation=="portrait") {
        //$("#orientation").removeClass("landscape");
        $("#orientation").addClass("portrait");
        return false;
    }
});
// You can also manually force this event to fire.
$( window ).orientationchange();
</script>
</body>
</html>

好的，我现在可以使用维度定义并结合 addClass(class).removeClass(otherclass) 但有人可以告诉我如何将相同的更改应用于 body 而不是 div 吗？

【问题讨论】：

您是否尝试更改设备的方向，也就是摇晃它？此外，您可能希望为 div#orientation 指定宽度和高度。
正常工作，也许正如@watson 提到的那样，给潜水高度和宽度fiddle.jshell.net/Palestinian/d6jY6/show 也删除类而不仅仅是添加。
@watson+@omar 感谢回复，我马上试试 =)
@Omar 我可以使用 Div 上定义的尺寸使其正常工作 =) 但我还有一个问题，如何使用“body”而不是 div 来完成？替换它们也不起作用
有人可以帮我让它使用“body”而不是 div 元素吗？谢谢）

标签： jquery jquery-mobile orientation-changes

【解决方案1】：

在 CSS 中，您必须包含高度和宽度。您可以使用 JS 执行此操作，但实际上需要在使用背景时指定高度和宽度。否则 div 不知道要占用多少空间。背景，顾名思义，就是在后台。

 .landscape {
        background-image:url('http://duggal.com/connect/wp-content/uploads/2013/06/Landscape-Nature-for-Wallpaper-Dekstop-.jpg');
    background-color: blue;
        width: 1020px;
        height: 900px;
    }
    .portrait {
        background-image:url('http://blogs.smithsonianmag.com/aroundthemall/files/2009/01/npg_portraits_nicholson_jack_2002.jpg');
    background-color: black;
        width: 725px;
        height: 590px;
    }

另外，如果你想不用这两行，你仍然需要摆脱旧的类。你可以用 className 来做，像这样：

$( window ).on( "orientationchange", function( event ) {
    if (event.orientation=="landscape") {
        //$("#orientation").removeClass("portrait");
        //$("#orientation").addClass("landscape");
        $("#orientation").get(0).className = "landscape");
        return false;
    } else if (event.orientation=="portrait") {
        //$("#orientation").removeClass("landscape");
        //$("#orientation").addClass("portrait");
        $("#orientation").get(0).className = "portrait";
        return false;
    }
});

这里是My jsFiddle。它是在没有 .orientationchange() 的情况下完成的，但这个概念仍然有效。

【讨论】：

非常感谢您的完整回复，我马上试试！ =) 几天来我一直在努力解决问题。我会告诉你进展如何！
小提琴工作正常，我理解代码，但它似乎在orientationchange上下文中不起作用：s the addClass.removeClass from a previous comment works, with dimension definitions ofc。跨度>