jQuery窗口调整大小并小于一定宽度答案

【问题标题】：jQuery window resize and less than certain widthjQuery窗口调整大小并小于一定宽度
【发布时间】：2018-06-26 06:13:05
【问题描述】：

我进行了很多搜索，但找不到合适的解决方案。我将在一定宽度后将元素添加/附加到另一个元素。但它仅在调整浏览器大小后才有效。

我找到了这个解决方案，但是still not helpful

我该如何实现？

$(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>

【问题讨论】：

那么问题是什么？你想让它也可以在负载上工作吗？
是的，它应该在加载和刷新后工作:)
@Kumar 你想添加或添加什么元素可以在你的 HTML 中添加吗？
点赞jsfiddle.net/oupsh3g9现在得到解决方案

标签： javascript jquery html

【解决方案1】：

要使其在 Load 上工作，请尝试

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

然后尝试调整大小

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

你可以在方法里面写$(window).width() < 700这样的条件

【讨论】：

很高兴知道它帮助了你:)

【解决方案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) 检索宽度

参考：

【讨论】：

如果小于 700 像素，我如何添加条件
很酷，谢谢伙计
@Kumar 你可以很容易地添加一个JS条件来检查它是否是700px，我更新了我的代码，看看吧！ jsfiddle.net/j6nermyL/7
:) 谢谢，如果这解决了您的问题，请将我的答案标记为解决方案。干杯！
干杯...再次非常感谢

【解决方案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>

【讨论】：