Question

基于此网址的代码：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），但有人可以告诉我如何将相同的更改应用于正文而不是div吗？

Answer 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（）的情况下完成的，但这个概念仍有效。

方向改变jquery需要帮助

1 个答案: