Jquery 没有通过 class 获取元素

Question

希望你做得很好:)

我正在尝试制作滚动动画，我的本地 jquery.js 文件中有这段代码：

$(() => { 

  /*  Components */

  $(".navbar_section").load("../components/navbar.html");
  $(".title_section").load("../components/title.html");
  $(".welcome_section").load("../components/welcome.html");
  $(".trust_section").load("../components/trust.html");
  $(".menu_section").load("../components/menu.html");
  $(".parallax_section").load("../components/parallax.html");
  $(".location_section").load("../components/location.html");
  AOS.init();

  /*  Animations */

  $(function () {
    var pizzaLeft = $(".pizza-menu-left");
    $(window).on("scroll", () => {
      var scroll = $(window).scrollTop();
      if (scroll >= 1500) {
        pizzaLeft.removeClass("roll-out-left");
        return pizzaLeft.addClass("roll-in-left");
      } else {
        pizzaLeft.removeClass("roll-in-left");
        return pizzaLeft.addClass("roll-out-left");
      }
    });
  });
});

问题是，.pizza-menu-left 没有被选中，但是上面的所有 classes 都被选中了。我已经尝试过 live()、on()，但似乎没有任何效果。我知道这都是关于 DOM 对象和属性被创建的时间，当然，上面的函数是运行在设置 class 属性之前。不过，我不知道如何解决这个问题。

Answer 1

假设 .pizza-menu-left 是动态加载的元素，当 onload 函数运行时它们将不可用，因此您需要在内部定义该变量事件处理程序。

$(function () {
    $(window).on("scroll", () => {
      var pizzaLeft = $(".pizza-menu-left");
      var scroll = $(window).scrollTop();
      if (scroll >= 1500) {
        pizzaLeft.removeClass("roll-out-left");
        return pizzaLeft.addClass("roll-in-left");
      } else {
        pizzaLeft.removeClass("roll-in-left");
        return pizzaLeft.addClass("roll-out-left");
      }
    });
  });

Jquery 没有通过 class 获取元素

Jquery doesn't get element by class

javascript

jquery

animation

class