javascript - 防止 jquery 使用 bootstrap 3 运行小分辨率？

Question

我有一个 div block ，使用 twitter bootstrap 为较大的设备显示。这个 div block 有一个关联的调用，可以在页面准备好后检索数据。当页面以较小的分辨率(如移动设备)显示时，我试图避免进行此 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 检查当前分辨率，或者 Bootstrap 是否有这样的 Hook ？

Answer 1

你可以这样做:

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

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