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

【问题标题】：How do I grab the ID of $this using jQuery and Waypoints如何使用 jQuery 和 Waypoints 获取 $this 的 ID
【发布时间】：2017-02-15 12:44:15
【问题描述】：

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

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 的方法，但无法正确获取语法。

【问题讨论】：

标签： javascript jquery jquery-waypoints

【解决方案1】：

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

参考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- 开头的类（参见this 答案以供参考）
将id 添加为类（删除了不必要的“if”结构）

Example

【讨论】：

这太好了，谢谢！但是，我确实读过this answer 关于.removeClass() 不需要参数。另外，我了解到from here 可以将处理程序选项作为第一个参数传递给航点。
@mapk 是的，您对 removeClass 之一是正确的。我搞砸了。但是处理函数中的$(this) 不包含航点。 'this' 是一个包含实际元素的航点对象。
感谢您的澄清。

【解决方案2】：

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");
    };


   });

  });
});

【讨论】：