javascript - 如果窗口的宽度小于值则不运行脚本

Question

我有一个响应式网站，带有一些 jQuery 代码，其中一些代码如下:

 <script>
    $(document).ready(function(){
        $("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").show();});
        $("#D1200C36LPB3").click(function(){$("#D1200C36LPB3_details").show();});
        $("#D1-3CA36LPB3").click(function(){$("#D1-3CA36LPB3_details").show();});
        $("#D1-0CA36LPB3").click(function(){$("#D1-0CA36LPB3_details").show();});
        $("#D700S36LPB3").click(function(){$("#D700S36LPB3_details").show();});
        $("#D700S24LMB3").click(function(){$("#D700S24LMB3_details").show();});
    });
</script>

上面的所有 div 元素(#D1000C36LPB3_details、#D1200C36LPB3_details、#D1-3CA36LPB3_details.. .) 的 CSS display 属性值为 none，因此默认情况下它们是不可见的，直到您单击上面的 div 元素之一(#D1000C36LPB3, #D1200C36LPB3, #D1-3CA36LPB3 ...) 然后显示相应的div。

但是，当jQuery脚本运行时，它会将相应的div display值设置为block。当视口(viewport)/窗口的宽度小于 400 像素时，我希望脚本以 position: fixed; 显示它们。

我的建议

我发现我可以使用固定位置显示它们:

$("#corresponding_ID").css("display", "fixed");

但我仍然不能让 jQuery 运行第一个脚本(使用 .show() 的脚本)。

Answer 1

不要这样直接设置css样式。正如已经评论的那样，使用例如.visible 类并让 css 媒体查询 决定。示例:

@media screen and (max-width: 399px) {
  .visible {
    display: fixed;
  }
}
@media screen and (min-width: 400px) {
  .visible {
    display: block;
  }
}

然后，在您的点击处理程序中，执行以下操作:

$("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").addClass('visible');});

此外，如果您的详细信息容器都遵循将 _details 附加到 id 的命名方案，那么将所有 id 放入一个数组中并迭代会更容易那:

$(document).ready(function(){
  var ids = [ "#D1000C36LPB3", "#D1200C36LPB3", "#D1-3CA36LPB3", "#D1-0CA36LPB3", "#D700S36LPB3", "#D700S24LMB3"];
  for (var i = 0; i < ids.length; i++) {
    $(ids[i]).on('click', function () { $(ids[i]+'_details').addClass('visible'); }
  }
};