Question

我试图同时使用媒体查询和JS。所以我需要使用4个大小的resize函数。对于每种情况，我都需要删除图片，因此我必须在调整大小时以动态方式删除它们。我有4个范围：1800+ - 1024 || 1024 - 640 || 640-320 || 320- 问题是即使分辨率在范围内，该功能也会启动并重新启动。所以我想检测功能何时第一次启动然后停止它。在这里我做了什么：

$(window).on('resize', function() {

  // Mosaic > 1024px
  var screenW = $(window).width();
  if (screenW > 1024) {
    var size = true;
    ....
  }
  if (screenW < 1024 && screenW > 640) {
    ...
  }
  ...
}

当检测到size = true时，我不知道如何停止调整大小..

编辑：谢谢大家！我现在有了这段代码

function checkSize()
{
    var container = jQuery('#test');
    var screenW = jQuery(window).width();
    console.log(screenW);

    if (screenW > 1800 && current != 1800)
    {
        container.empty();
        jQuery('div#test').append("1800+\n") ;
        console.log('1800');
        current = 1800;
    }
    else if (screenW < 1024 && current != 1024)
    {
        container.empty();
        jQuery('div#test').append("1024+\n") ;
        console.log('1024');
        current = 1024;
    }
    else if (screenW < 640 && current != 640)
    {
        container.empty();
        jQuery('div#test').append("640+\n") ;
        console.log('640');
        current = 640;
    }
    else if (screenW <= 320 && current != 320)
    {
        container.empty();
        jQuery('div#test').append("320+\n") ;
        console.log('320');
        current = 320;
    }

}

我不知道我想要的是什么，它的工作得很好。例如，屏幕W＆lt; = 320似乎不起作用。 This this fiddle ..

Answer 1

EDIT 您需要在加载时执行一次，然后在每次调整大小时执行它，但前提是您更改范围。这是一个代码示例：

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    div#test {
        white-space:pre ;
    }
    div#minis {
        font-size:0 ;
    }
</style>
<div id="minis">
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
</div>
<div id="test"></div>

Javascript：

var current = null ;

function checkSize()
{
    var screenW = jQuery(window).width() ;

    if ( screenW > 1800 && current != 1800 )
    {
        // Do what you need to do for 1800+
        jQuery('div#test').append("1800+\n") ;
        showImages(10) ;
        current = 1800 ;
    }
    else if ( screenW > 1024 && screenW <= 1800 && current != 1024 )
    {
        jQuery('div#test').append("1024/1800\n") ;
        showImages(8) ;
        current = 1024 ;
    }
    else if ( screenW > 640 && screenW <= 1024 && current != 640 )
    {
        jQuery('div#test').append("640/1024\n") ;
        showImages(6) ;
        current = 640 ;
    }
    else if ( screenW > 320 && screenW <= 640 && current != 320 )
    {
        jQuery('div#test').append("320/640\n") ;
        showImages(4) ;
        current = 320 ;
    }
    else if ( screenW <= 320 && current != 0 )
    {
        jQuery('div#test').append("320-\n") ;
        showImages(2) ;
        current = 0 ;
    }
}

function showImages(number)
{
    var i = 1 ;
    jQuery('div#minis img').each(function(){
        if ( i > number ) jQuery(this).fadeOut() ;
        else jQuery(this).fadeIn() ;
        i++ ;
    }) ;
}

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

看看小提琴，看它是否像你想要的那样工作： http://jsfiddle.net/HCc6E/2/

上一个答案--------- 如果你真的希望它只被推出一次，你可以试试jQuery（window）.off（＆＃39; resize＆＃39;）而不是var size = true。但我不明白为什么你不能在你的情况下使用媒体查询：你能展示一些你的代码还是小提琴？

onresize加载功能只需一次

1 个答案: