英文:
jquery above and below screen sizes
问题
我已经添加了一个脚本，用于在不同的屏幕尺寸下在不同的div之前显示一个div。这是我使用的代码：
jQuery(function($){
jQuery(document).ready(function(){
jQuery(window).on('resize', function(){
if(jQuery(window).width() <= 1024){
jQuery(".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper").insertBefore(".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table");
}
else if(jQuery(window).width() >= 1025){
jQuery(".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper").insertBefore(".checkout.woocommerce-checkout .flux-checkout__content-right #order_review");
}
});
});
});
但是当我打开网站时，这段代码不起作用。只有在调整屏幕大小时才有效。可能是因为使用了resize函数。
请问有谁能指导我如何使其在不调整屏幕大小的情况下显示这两个条件，一个在1024px以上工作，另一个在1024px以下工作。
TIA
英文:
I have added a script for showing a div before different divs in different screen size. This is the code I used:
jQuery(function($){
jQuery(document).ready(function(){
jQuery(window).on('resize', function(){
if(jQuery(window).width() <= 1024){
jQuery( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" ).insertBefore( ".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table" );
}
else if(jQuery(window).width() >= 1025){
jQuery( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" ).insertBefore( ".checkout.woocommerce-checkout .flux-checkout__content-right #order_review" );
}
});
});
});
But the code is not working when I open the site. It only works if I resize the screen. May be due to the resize function is used.
Can anyone please guide me how to make it so that it'll show the 2 conditions even without resizing the screen and one'll work above 1024px and another below 1024px.
TIA
答案1
得分: 1
只需将您的代码放入一个函数中，并在文档准备就绪时调用它：
$(function(){
resize();
$(window).on('resize', resize);
function resize(){
$(".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper")
.insertBefore(
$(window).width() <= 1024 ?
".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table" :
".checkout.woocommerce-checkout .flux-checkout__content-right #order_review"
);
}
});
英文:
Just put your code in a function and call it on the document ready:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function(){
resize();
$(window).on('resize', resize);
function resize(){
$( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" )
.insertBefore(
$(window).width() <= 1024 ?
".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table" :
".checkout.woocommerce-checkout .flux-checkout__content-right #order_review"
);
}
});
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论