jQuery for 循环切换 id

Question

我正在尝试使用 jquery waypoint 插件动态更改页面的背景(它会告诉您元素何时位于视口(viewport)的顶部或底部)。我的 HTML 很简单 - 我有多个标题，其 id 为 #part1'、#part2' 等等。当 part[x] 位于视口(viewport)顶部时，我希望显示 img[x]。

以下代码有效:

$("#part2").waypoint(function(event, direction) {
   if (direction === 'down') {
      $(".container").attr("id", "img2");
   }
   else {
      $(".container").attr("id", "img2");
   }
});

但是，我有 18 个“部分”，我不想这个代码出现 18 次。我尝试使用 for 循环像这样:

var chapters = $("[id^='part']");

for (var i=1; i<=chapters.length; i++){

    $("#part[i]").waypoint(function(event, direction) {
       if (direction === 'down') {
          $(".container").attr("id", "img[i]");
       }
       else {
          $(".container").attr("id", "img[i]");
       }
    });
}

但是，还是不行。是否可以像我一样用方括号转义选择器？如果没有，实现这一目标的正确方法是什么？

Answer 1

假设 waypoint 插件编写正确并处理多个元素:

$("[id^='part']").waypoint(function(event, direction) {
    $(".container").attr('id', this.id.replace('part', 'img'));
});

根据需要添加方向检查。

我不熟悉这个插件，但关键部分是您应该能够将路点插件绑定(bind)到多个元素，然后在事件处理程序中this应该 是触发事件的元素，其 ID 就是 this.id。

注意:仅更改 .container 上的 ID 通常不会更改其上的图像，除非您有一堆如下所示的 CSS 规则:

#img1 { background-image: ... }
#img2 { background-image: ... }
...

但是在这种情况下，您应该使用类而不是 ID - 元素的 ID 在其生命周期内保持不变以及其 CSS 类发生变化更为正常。

如果.container没有其他CSS类，那么给它一个固定的container ID并使用上述代码的变体是有意义的:

$("[id^='part']").waypoint(function(event, direction) {
    $("#container").attr('class', this.id.replace('part', 'img'));
});

没有任何其他 CSS 类的限制是，由于 class 可以包含多个值，因此完全覆盖类列表比删除前一个类(无论是什么)要简单得多然后添加新的。