Question

我进行了很多搜索，但找不到合适的解决方案。我要在某个宽度之后将元素添加/追加到另一个元素。但是它仅在调整浏览器大小之后才起作用。

我找到了此解决方案，但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>

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)

参考：

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>

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

3 个答案: