如何在 jQuery 中添加媒体查询

Question

这是我在我的 WordPress 网站中使用的 jQuery 代码，它工作正常。

jQuery(document).ready(function($){
$(document).on("click",".selected",function() {
$('.wvg-single-gallery-image-container').css('display','none');
})  
});

我只想让代码在 766 的屏幕宽度下停止工作，在 766 上代码不必工作。

如果有什么东西可以让这成为可能，请告诉我。

谢谢，阿卜杜拉

Answer 1

考虑以下因素。

jQuery(document).ready(function($){
  $(document).on("click", ".selected", function() {
    if($(window).width() < 766){
      $('.wvg-single-gallery-image-container').hide();
    }
  });
});

如果文档不是很宽，小于 766，按钮将执行该操作。否则什么也不会发生。

查看更多：https://api.jquery.com/width/

Answer 2

您可以使用 mediaMatch 来测试媒体查询…

if (window.matchMedia('(max-width: 766px)')) {
    $('.wvg-single-gallery-image-container').css('display','none');
}

…但是这种方法不是很好。考虑一下如果用户在 JS 具有运行之后调整 window 的大小会发生什么。您添加的内联样式仍然存在，但基于错误的 window 大小。

而是使用 JS 在元素中添加和删除类。然后在你的 CSS 中使用那些类和媒体查询。

$('.wvg-single-gallery-image-container').addClass('a-suitably-semantic-class-name);

如何在 jQuery 中添加媒体查询

How to add Media Query in jQuery

javascript

jquery

media-queries