我可以替換一個內容嗎 <div> 當視口更改大小時，使用JQuery或JavaScript使用HTML的外部片段？

Question

<html>
    <head> 
    </head>

    function () {
        var viewportWidth = $(window).width();
        if (viewportWidth < 700) {
            $('#wrapper').load('A.html');
        };

     <body>
         <div id="wrapper">
             <h1>original</h1>
         </div>
     </body>
</html>

我認為類似此功能的東西可能只用A.html就能做到

<h1>small</h1>

但我不知道。

感謝您提供的任何幫助

Answer 1

嘗試使用resize事件：

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if (viewportWidth < 700) {
        $('#wrapper').load('A.html');
    };
});

Answer 2

是的，您可以這樣做。請看以下代碼片段：

$(document).ready(function() {

    $(window).resize(function() {
        var widthCurr=$( window ).width();


        if(widthCurr<=360 && widthCurr>276)
        {

        $('#sample-div').html( "<p>All new content. <em>You bet!</em></p>" );
        }
        else if(widthCurr<=276)
        {

        $('#sample-div').html( "<p>I am smaller. <em>You bet!</em></p>" );
        }
        else if(widthCurr>360)
        {
         $('#sample-div').html( "<p>Back to original</p>" );
        }
    });
});

在上面的示例中，隨着窗口寬度的變化，您更改了div的內容。 同樣，您可以設置高度條件，要獲得高度，您需要使用：

var viewportHeight = $(window).height();

最后

 $(window).resize

窗口/視口的大小更改時觸發。

另外，如果要更改的內容很小，則應使用.html而不是.load

希望這可以幫助

我可以替換一個內容嗎 <div> 當視口更改大小時，使用JQuery或JavaScript使用HTML的外部片段？

問題描述

2 個解決方案

解決方案1
1 2014-09-21 21:12:34

解決方案2
1 2014-09-21 21:20:38

我可以替換一個內容嗎 <div> 當視口更改大小時，使用JQuery或JavaScript使用HTML的外部片段？

問題描述

2 個解決方案

解決方案1 1 2014-09-21 21:12:34

解決方案2 1 2014-09-21 21:20:38

解決方案1
1 2014-09-21 21:12:34

解決方案2
1 2014-09-21 21:20:38