jQuery innerWidth 无法与 } else { 一起使用，而无需进行页面刷新

Question

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

我的 jQuery 脚本有两组动作，一组用于 639px 以上，一组低于 639px。它适用于页面加载，但如果您将尺寸从 1600px 减小到 600px，元素的高度仍然保持 window 的高度，尽管低于 639px 它不会将其更改为 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块中：$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
在else块中：$('.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();
});

jQuery innerWidth 无法与 } else { 一起使用，而无需进行页面刷新

jQuery innerWidth not working with } else { without doing a page refresh

javascript

jquery

if-statement

window-resize