防止 jQuery 使用 bootstrap 3 以小分辨率运行

prevent jquery from running for small resolutions using bootstrap 3?

本文关键字：分辨率 运行 jQuery 使用 bootstrap 防止      更新时间：2023-09-26

我有一个div块，它显示了使用Twitter引导程序的大型设备。 此div 块具有关联的调用，该调用在页面准备就绪后检索数据。我试图避免在页面以较小的分辨率（如移动设备）显示时进行此jquery调用。

我的 HTML 看起来像这样：

<div class="row">
<div class="col-sm-12 hidden-xs hidden-sm">
        <div id="test"></div>
    </div>
</div>

jquery 事件如下所示：

<script type="text/javascript">
    $(document).ready(function() {
           getData();
           function getData() {
               $.post("functions/test_function.php", {f: 'getData'}, function(data) {
                   if (data.success) {   
                       $('#test').html(data.records);
                   }            
               }, "json");
           }
    });
</script>

如果页面在较小的设备上打开，以至于div 被隐藏，如何避免调用我的 getData 函数？我是否需要通过 javascript/jquery 检查 cuurrent 分辨率，或者引导程序是否有类似内容的钩子？

你可以做：

if( $('#myDiv:visible').length){
   /* do ajax*/
}

将检查大小排除在等式之外，并允许媒体查询处理所有这些

首先检查div 是否显示

$("#test").parent("div").css('display') != 'none'

如果显示，请调用该函数。

您可以使用 modernizr 来检查媒体查询：

if (Modernizr.mq("screen and (min-width:950px)"))

因此，请填写所需的断点，从中应执行 js 部分：

$(document).ready(function() {
  if (Modernizr.mq("screen and (min-width:950px)")) {
   getData();
  }
   function getData() {
    $.post("functions/test_function.php", {f: 'getData'}, function(data) {
     if (data.success) {   
      $('#test').html(data.records);
     }            
    }, "json");
   }
});
相关文章：