javascript - jQuery insideWidth 无法与 } else { 一起使用而不进行页面刷新

Question

我有一个 jQuery 没有在 else 语句上触发的问题，我很确定它为什么不触发很简单，但由于我缺乏 JavaScript 知识，我无法自己解决它，我希望有人能告诉我我的问题。

我的 jQuery 脚本有两组操作，一组用于 639px 以上，一组用于以下。它适用于页面加载，但如果将尺寸从 1600 像素减小到 600 像素，则元素的剩余高度仍然是窗口的高度，尽管低于 639 像素，但它不会将其更改为 height-min: auto.

$(function() {
  $(window).resize(function() {
    if (window.innerWidth >= 639) {
      windowHeight = $(window).innerHeight();
      $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
      $("body.home").vegas({
          delay: 8000,
          transition: 'fade',
          transitionDuration: 8e3,
          timer: false,
          slides: [
              { src: "/wp-content/uploads/slide2-0.jpg" },
              { src: "/wp-content/uploads/slide2-1.jpg" },
              { src: "/wp-content/uploads/slide2-2.jpg" }
          ],
          animation: "kenburns"
      });
    } else {
      // This works but only if the page is loaded with the viewpoint less of 639px
      // The min-height auto doesn't work.
      $('.nanoContainer, .flexAligner .vegas-container').css('min-height', 'auto');
      $(".home .intro").vegas({
          delay: 8000,
          transition: 'fade',
          transitionDuration: 8e3,
          timer: false,
          slides: [
              { src: "/wp-content/uploads/slide2-0.jpg" },
              { src: "/wp-content/uploads/slide2-1.jpg" },
              { src: "/wp-content/uploads/slide2-2.jpg" }
          ],
          animation: "kenburns"
      });
    }
  }).resize();
});

Answer 1

min-height声明不起作用，因为您有一个拼写错误:if-else 条件中的选择器不相同:

• 在 if block :$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
• 在 else block :$('.nanoContainer, .flexAligner .vegas-container')

后者缺少一个逗号，如果没有您的标记，我无法判断哪个是预期的选择器。

关于.vegas()的问题没有按预期工作，那是因为您只是在不同的断点处初始化插件，但从不销毁其他实例。在这种情况下，我建议您引用代码:the plugin appears to expose a destroy function ，您可以在断点之间切换时调用它来销毁实例，例如$selector.vegas('destroy') .

这是一个可能工作的代码:不能保证，因为您没有提供 MCVE 并且我无法测试它:

$(function() {
  $(window).resize(function() {
    if (window.innerWidth >= 639) {

      // Set min-height
      windowHeight = $(window).innerHeight();
      $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);

      // Create new Vegas instance
      $("body.home").vegas({
          delay: 8000,
          transition: 'fade',
          transitionDuration: 8e3,
          timer: false,
          slides: [
              { src: "/wp-content/uploads/slide2-0.jpg" },
              { src: "/wp-content/uploads/slide2-1.jpg" },
              { src: "/wp-content/uploads/slide2-2.jpg" }
          ],
          animation: "kenburns"
      });

      // Destroy other Vegas instance
      $(".home .intro").vegas('destroy');

    } else {
      // This works but only if the page is loaded with the viewpoint less of 639px
      // The min-height auto doesn't work.
      $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', 'auto');

      // Create new Vegas instance
      $(".home .intro").vegas({
          delay: 8000,
          transition: 'fade',
          transitionDuration: 8e3,
          timer: false,
          slides: [
              { src: "/wp-content/uploads/slide2-0.jpg" },
              { src: "/wp-content/uploads/slide2-1.jpg" },
              { src: "/wp-content/uploads/slide2-2.jpg" }
          ],
          animation: "kenburns"
      });

      // Destroy other Vegas instance
      $("body.home").vegas('destroy');
    }
  }).resize();
});