jQuery窗口調整大小並小於一定寬度

Question

我進行了很多搜索，但找不到合適的解決方案。 我要在某個寬度之后將元素添加/追加到另一個元素。 但是它僅在調整瀏覽器大小之后才起作用。

我找到了此解決方案，但仍然沒有幫助

我該如何實現？

 $(window).on("resize", function(event){ $vWidth = $(this).width(); $('#test').html($vWidth) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"></div> 

Answer 1

要使其在負載下工作，請嘗試

$( window ).load(function() {
  // Run code
});

然后調整大小嘗試

$(window).on("resize", function(event){
  $vWidth = $(this).width();
  $('#test').html($vWidth)
});

您可以在方法內部編寫$(window).width() < 700類的條件

Answer 2

如果您希望代碼在頁面加載時運行，也可以在頁面准備就緒時觸發它。

我會將您代碼的相關部分轉換為一個function以避免重復代碼。

演示工作樣本：
https://jsfiddle.net/j6nermyL/9/

樣本JS代碼：

$(document).ready(function() {
    checkWidth();
});
$(window).on("resize", function(){
    checkWidth();
});


function checkWidth(){
    $vWidth = $(window).width();
    $('#test').html($vWidth);

    //Check condition for screen width
    if($vWidth < 700){
         $('#msg').html("Width: Less than 700");
    }else{
         $('#msg').html("Width: More than 700");
    }
}

示例HTML代碼：

<div id="test">Test</div>
<br>
<div id="msg"></div>

• 更新：我用檢查條件修改了我的JSFiddle。
• 更新2：現在可以從$(window)檢索寬度

參考：

• jQuery Ready事件
• .ready（）的API文檔

Answer 3

使用load ，如果你想要做的頁面加載動作

嘗試這個：

 $(window).on("resize", function(event){ $vWidth = $(this).width(); $('#test').html($vWidth) }); $(window).on("load", function(event){ $vWidth = $(this).width(); $('#test').html($vWidth) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"></div>