query .js在页面加载时不起作用，仅在屏幕<= 480px时起作用

Enquire.js not working on page load, only works when screen <= 480px

本文关键字：起作用 480px 屏幕 js 加载 query 不起作用      更新时间：2023-09-26

所以我使用query .js为我的网站添加和删除bootstrap的预定义css类。以下是我的文件:

一些引导HTML缩略图:

<div class="row">
  <div class="thumb thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
  <div id ="thumb" class="thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
</div>

我已经设置了query .js，以便缩略图大小根据屏幕大小调整，如下所示:

<script type="text/javascript">
var $info = $('.thumb');
    enquire.register("(max-width: 480px)", {
    match: function() {      
        $info.removeClass('col-xs-6');
        $info.addClass('col-xs-12');
    },

    unmatch: function() {
         $info.removeClass('col-xs-12');
         $info.addClass('col-xs-6');      
    }
    }).listen();
</script>

问题:

我遇到的问题是，query .js代码只有在屏幕尺寸减小到480px或更小时才会启动。

所以当网站第一次加载时，调整大小代码将无法工作，直到我手动将其大小调整到480px或更低，然后你可以看到调整大小发生了

你可以看看这里的网站

unmatch函数只有在从匹配状态变为不匹配状态时才会起作用。

我想你也想使用setup函数。这将在调用处理程序时运行内部的javascript。以下是来自query .js站点

的四个主要调用
enquire.register("screen and (max-width:45em)", {
// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},      
// OPTIONAL
// If supplied, triggered when the media query transitions 
// *from a matched state to an unmatched state*.
unmatch : function() {},    
// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},    
// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function 
// until the first time the media query is matched
deferSetup : true,
// OPTIONAL
// If supplied, triggered when handler is unregistered. 
// Place cleanup code here
destroy : function() {}
});

我认为您可能需要在文档中准备好代码。这里使用jQuery:

<script type="text/javascript">
    $(function() {
        var $info = $('.thumb');
        enquire.register("(max-width: 480px)", {
        match: function() {      
            $info.removeClass('col-xs-6');
            $info.addClass('col-xs-12');
        },

        unmatch: function() {
             $info.removeClass('col-xs-12');
             $info.addClass('col-xs-6');      
        }
        });
    });
</script>
相关文章：