如何使用 jQuery 和 Waypoints 获取 $this 的 ID

Question

我正在尝试获取路点元素的 ID，然后在滚动到达该路点时将该 ID 值作为 class 添加到正文中。但这似乎不起作用。

HTML

<body class="bg-1">
<div id="content">
    <div class="cover">
        <h2>Title</h2>
        <p class="keep-scrolling">Keep scrolling along</p>
    </div>
    <section class="stats">
        <article id="bg-1">
            /* stuff */
        </article>
        <article id="bg-2">
            /* stuff */
        </article>
        <article id="bg-3">
            /* stuff */
        </article>
        <article id="bg-4">
            /* stuff */
        </article>
    </section>
</div>
</body>

Javascript

$(function() {
  $("article").waypoint(function(direction) {  //callback when waypoint is reached, with direction of scroll as a parameter
    var $this = $(this); // caching the waypoint element

    if($this.attr("id") == "bg-1") {
      $("body").removeClass();
      $("body").addClass('bg-1');
    } else if($this.attr("id") == "bg-2") {
      $("body").removeClass();
      $("body").addClass("bg-2");
    } else if($this.attr("id") == "bg-3") {
      $("body").removeClass();
      $("body").addClass("bg-3");
    } else if($this.attr("id") == "bg-4") {
      $("body").removeClass();
      $("body").addClass("bg-4");
    } else {
      $("body").addClass("bg-1");
    };

  });
});

我有很多获取 ID 的方法，但语法不正确。

Answer 1

mapk，你 $this 与你的 jquery 选择器的响应有关，在你的情况下它检索文章元素列表，并且你的算法将它作为一个单独的威胁。

考虑在代码中使用 foreach

$(function() {
  $("article").waypoint(function(direction) {  //callback when waypoint is reached, with direction of scroll as a parameter
    $(this).each(function(i,val){
    var $this = $(val); // caching the waypoint element

    if($this.attr("id") == "bg-1") {
      $("body").removeClass();
      $("body").addClass('bg-1');
    } else if($this.attr("id") == "bg-2") {
      $("body").removeClass();
      $("body").addClass("bg-2");
    } else if($this.attr("id") == "bg-3") {
      $("body").removeClass();
      $("body").addClass("bg-3");
    } else if($this.attr("id") == "bg-4") {
      $("body").removeClass();
      $("body").addClass("bg-4");
    } else {
      $("body").addClass("bg-1");
    };


   });

  });
});

Answer 2

您使用的航点回调函数错误。

参考 API 这应该适合你：

$(function() {
  $("article").waypoint({
    handler: function(direction) {
      $("body").removeClass(function(index, css) {
        return (css.match(/(^|\s)bg-\S+/g) || []).join(' ');
      });
      //or $("body").removeClass();
      $("body").addClass(this.element.id);
    }
  });
});

我对你的解决方案做了更多调整：

从正文中删除所有以 bg- 开头的 class（参见 this 答案以供参考）
将 id 添加为 class（删除了不必要的“if”结构）

Example

如何使用 jQuery 和 Waypoints 获取 $this 的 ID

How do I grab the ID of $this using jQuery and Waypoints

javascript

jquery

jquery-waypoints