Question

我希望我在这里得到一个简单的问题。我经历了谷歌和stackoverflow搜索部分，但对我的问题解决方案的想法没有运气。

我的问题是，如果图片的宽度应低于文档的宽度大小，我需要一个横幅来更改第二个类。一般来说，我会使用媒体查询，但因为它alawys只取决于图片的大小，我不知道我怎么能用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).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');
        }
    });
});

if（$（'。single-featured'）。width（）＆lt; $（document）.width（））

1 个答案: