Question

我是一个真正的jquery newbee并找到了这个脚本 - 它很有效但只有当我触摸屏幕（移动）时......

我正在寻找的是一种自动激活脚本的方法......任何人都可以帮助我吗？

<script>
    //  changing the order of the sidebar so it goes after the content for   mobile versions

    jQuery(window).resize(function(){

        if ( jQuery(window).width() < 480 )
        {
            jQuery('.mid_grid_right').insertBefore('.mid_grid_left');
        }

        if ( jQuery(window).width() > 480 )
        {
            jQuery('.mid_grid_left').insertBefore('.mid_grid_right');
        }

        jQuery(window).height(); // New height
        jQuery(window).width(); // New width
    });
</script>

Answer 1

当你的DOM准备就绪时，不会自动调用回调函数，所以你应该这样做：

<script> 
   function resizeFn(){
      if ( jQuery(window).width() < 480 ) {
        jQuery('.mid_grid_right').insertBefore('.mid_grid_left'); 
      } 
      if ( jQuery(window).width() > 480 ) { 
         jQuery('.mid_grid_left').insertBefore('.mid_grid_right'); 
      }
      jQuery(window).height(); // New height
      jQuery(window).width(); // New width
   }

   jQuery(window).resize( resizeFn );
   jQuery(document).ready( resizeFn) ;
</script>

Answer 2

你可以将调整大小的逻辑放入它自己的函数中，然后连接一个事件来调用相同的函数：

<script> 
    // When your page is ready (and jQuery is loaded), call your function
    $(function(){         
        resize();
    });
    // When the window is resized, call your function
    $(window).resize(function(){
        resize();
    });
    // Define your function
    function resize(){
        if ($(window).width() < 480 ) {
            $('.mid_grid_right').insertBefore('.mid_grid_left'); 
        } 
        if ($(window).width() > 480){ 
            $('.mid_grid_left').insertBefore('.mid_grid_right'); 
        } 
        $(window).height(); 
        $(window).width(); 
    }
 </script>

Answer 3

代码位于resize事件的监听器内。要在pageload上运行相同的代码，只需为document.ready添加一个监听器，并将引用传递给同一个函数。

function gripChange(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('.mid_grid_right').insertBefore('.mid_grid_left');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('.mid_grid_left').insertBefore('.mid_grid_right');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
}

jQuery(window).resize(gripChange);
jQuery(document).ready(gripChange);

Answer 4

用jQuery准备好整个块。 DOM没有按照您实现它的方式准备就绪，浏览器还不知道“窗口”甚至代表什么。

此外，不要一次又一次地重复jQuery（窗口）以获得更快的响应。

<script>
    //  changing the order of the sidebar so it goes after the content for mobile versions
    jQuery(document).ready(
        var $window = jQuery(window);
        $window.resize(function(){

            if ( $window.width() < 480 )
            {
                jQuery('.mid_grid_right').insertBefore('.mid_grid_left');
            }
            // if ( jQuery(window).width() > 480 )
            else
            {
                jQuery('.mid_grid_left').insertBefore('.mid_grid_right');
            }

            $window.height(); // New height
            $window.width(); // New width
        });
    });
</script>

如何自动激活jquery脚本

4 个答案: