方向改變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的幫助需要

回答

相關問題