如何在屏幕寬度更改時激活.insertBefore？

Question

我有這個片段，如果屏幕寬度低於767px，則切換二次包裝的位置在主包裝上方。這很好，但它只適用於刷新。當屏幕寬度改變時，我如何讓它自動工作？

謝謝！總新手在這裏。

jQuery(document).ready(function(){ 

if(screen.width<=767){ 

jQuery('body.single #secondary').insertBefore('#primary'); 
} 

}); 

Answer 1

好像你正在使用jQuery，所以我會建議.resize（）方法。

https://api.jquery.com/resize/

每當窗口大小這將觸發。你可以在那時做任何你需要的事情。

$(window).resize(function(){ 
    If (myWindow.width() >= windowThreshold){ 
     //do all the things... 
    } 
}); 

Answer 2

window.addEventListener('resize', function() { 
// do something with screen width 
}); 

或使用jQuery：

$(window).on('resize', function() { 
    // do something with screen width 
}) 

Answer 3

我推薦使用.resize()方法，因爲您使用的是JQuery。調整窗口大小時調用此方法。

現在，你可以添加你這樣的代碼。

var windowThreshold = 767; 
 

 
$(window).resize(function() { 
 
    if ($(window).width() < windowThreshold + 1) { 
 
    // do something with $(window).width() 
 
    $("#log").append("<div>The window size is " + $(window).width() + "px</div>"); 
 
    $('#secondary').insertBefore('#primary'); 
 
    } 
 
});

#primary { 
 
    background-color: red; 
 
} 
 

 
#secondary { 
 
    background-color: yellow; 
 
}

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

您還可以使用.on("resize", function() {})

$(window).on('resize', function() { 
 
    if ($(window).width() < windowThreshold + 1) { 
 
    // do something with $(window).width() 
 
    $("#log").append("<div>The window size is " + $(window).width() + "px</div>"); 
 
    $('#secondary').insertBefore('#primary'); 
 
    } 
 
})

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

Answer 4

我知道這有一個公認的答案，而只是備案，你可以讓CSS做通過使用媒體查詢和flexbox進行工作。

body { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 
div { 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.box { 
 
    background: tomato; 
 
    order: 1; 
 
} 
 
.circle { 
 
    border-radius: 50px; 
 
    background: lightblue; 
 
    order: 2; 
 
} 
 
@media (max-width: 767px) { 
 
    .box { 
 
    order: 2; 
 
    } 
 
}

<div class="circle"></div> 
 
<div class="box"></div>