如果 ($('.single-featured').width() < $(document).width())

Question

我希望我在这里有一个简单的问题要问你。我浏览了 google 和 Whosebug 搜索部分，但对我的问题的解决思路不太走运。

我的问题如下，如果图片的宽度应该低于文档的宽度大小，我需要一个横幅来更改第二个 class。通常我会使用媒体查询，但因为它只取决于图片的大小，所以我不知道我还能如何使用 js 或 jquery.

我不知道为什么它不起作用。我执行了我在 Chrome 的控制台上遇到的所有错误以及出现在我的编辑器上的每个人...我通常只使用 html 和 css 并且可以编辑已经存在的 js 和 jqueries。但这是我自己编写的少数代码之一，我有点卡住了...

$(document).ready(function(){
   $('.single-featured').resize(function(){

          if ($('.single-featured').width() < $(document).width())  {
               $('.single-featured').removeClass('thumb-vh');
               $('.single-featured').addClass('thumb-auto');
          }
          else {
               $('.single-featured').removeClass('thumb-auto');
               $('.single-featured').addClass('thumb-vh');

           }
   });
});

我感谢任何关于此事的解决方案或解释。

Answer 1

几件事：

resize 不会在单个元素上触发，它会在 window 上触发，所以 $(window).resize(...)，而不是 $('.single-featured').resize(...).
要获得 window 的宽度，您需要 $(window).width()，而不是 $(document).width()。

旁注：不断重新查询 DOM 不是一个好主意。只有在结果可能发生变化时才进行查询，然后记住结果：

$(document).ready(function() {
    $(window).resize(function() {
//    ^^^^^^
        var featured = $('.single-featured');
//      ^^^^^^^^^^^^
        if (featured.width() < $(window).width()) {
//                               ^^^^^^
            featured.removeClass('thumb-vh');
            featured.addClass('thumb-auto');
        } else {
            featured.removeClass('thumb-auto');
            featured.addClass('thumb-vh');
        }
    });
});

如果 ($('.single-featured').width() < $(document).width())

if ($('.single-featured').width() < $(document).width())

javascript

jquery

image-resizing