Question

我正在尝试创建一个检查浏览器窗口宽度的函数，并根据宽度来应用或删除类。但是，我要么似乎无法删除其中一个类，也无法根据类来获取函数。

概念是： 在窗口调整大小时，如果窗口宽度超过480px，则将类“deskop”应用于图形“.grid-block”，并删除类“mobile”。 ELSE，如果窗口宽度低于481px，则删除“桌面”类并应用“移动”。然后，如果“.grid-block”具有类“desktop”，则允许进行此mousover效果。如果该图具有“移动”类，则阻止鼠标悬停。

我的问题是： 我无法让类应用/删除调整大小功能正常启动，所以我借用并修改了我发现的一些代码，结果看起来像这样......

$(window).load(function() {
  (function($) {
    var $window = $(window),
    $block = $('.grid-block');

    function resize() {
      if ($window.width() < 481) {
        return $block.addClass('mobile');
      }
      $block.removeClass('mobile');
      if ($window.width() > 480) {
        return $block.addClass('desktop');
      }
      $block.removeClass('desktop');
    }
    $window
    .resize(resize)
    .trigger('resize')
  })(jQuery);
});

此功能可以正确分配移动类，但它始终保留桌面类。所以，它 - 我想 - 所以我修改了函数以省略使用桌面类并使我的函数完全基于具有移动类的图形元素，如此...

if (!$('.grid-block').hasClass("mobile")) {
  $('.grid-block').mouseover(function() {
    $(this).find("figcaption").removeClass("testopacity");
  });
  $('.grid-block').mouseout(function() {
    $(this).find("figcaption").addClass("testopacity");
  });
}

不管检查“.grid-block”数字是否已应用“移动”类，它都会继续使用鼠标悬停功能，无论浏览器窗口宽度是多少。

我的功能出了什么问题？为什么第一个没有删除桌面类，为什么第二个没有在执行它的功能之前检查移动类？

Answer 1

您可能希望尝试使用次要更新的第一个调整大小功能。您似乎永远无法在此行 $ block.removeClass（'desktop'）; 中找到代码，因为您之前会返回此代码！所以如下图所示移动该行并尝试：

if ($window.width() < 481) {
  $block.removeClass('desktop');
  return $block.addClass('mobile');
}

无法让jquery resize函数正常工作

1 个答案: