方向改变jQuery的帮助需要

立足自己的代码在这个网址：http://api.jquerymobile.com/orientationchange/方向改变jQuery的帮助需要

我试图改变它，所以它可以显示每个方向不同的图像。在使用$("#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（类）.removeClass（otherclass），但可能有人请告诉我我如何将这种变化的身体，而不是一个div？

来源

2013-07-30 Kizer Yakuza

您是否尝试改变设备的方向，又名，摇动它？此外，你可能想要给div＃方向一个宽度和高度。 – dezman

正常工作，也许正如@watson所提到的那样，给予潜水高度和宽度http://fiddle.jshell.net/Palestinian/d6jY6/show/还可以删除类，而不仅仅是添加。 – Omar

@ watson + @ omar谢谢你的回复，我马上给它试一下=） –

在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（），但这个概念仍然有效。

来源

2013-07-30 00:44:05 smcjones

非常感谢您的全面回复，我现在就试试吧！ =）我一直在试图弄清楚几天。我会让你知道它是怎么回事！ –

小提琴工作正常，并且我理解代码，但它似乎在orientationchange上下文中不起作用：■先前注释中的addClass.removeClass起作用，尺寸定义为c。 –

方向改变jQuery的帮助需要

回答

相关问题