用于切换id的循环的jQuery

我正在尝试使用jquery waypoint插件动态更改页面的背景（它告诉您元素何时位于视口的顶部或底部）。我的HTML很简单-我有多个标题，id为

#part1'，

#part2'等等。当

part[x]

位于视口顶部时，我希望显示

img[x]

以下代码起作用：

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

但是，我有18个“部件”，我不想让这个代码重复18次。我尝试对循环使用

像这样：

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

var chapters=$（“[id^='part']”）；
对于（var i=1；i，如果使用方括号，为什么不：

$("#part" + i)
"img" + i

然后您只需选择“按id”，并动态创建id。
您可以这样尝试

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

for（var i=1；i假设正确写入航路点插件并处理多个元素：

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

根据需要添加方向检查

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

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

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

然而，在这种情况下，您应该使用类而不是ID——元素的ID在其生命周期中保持不变，CSS类发生变化，这更为正常

如果
.container
没有其他CSS类，则有必要为其指定一个固定ID
container
，并使用上述代码的变体：

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

没有任何其他CSS类的限制是，由于
class
可以包含多个值，因此完全覆盖类列表要比删除以前的类（不管是什么）简单得多然后添加一个新的。
我不明白为什么要执行对两者都具有相同操作的if/elseconditions@popnoodles是的，目前这是多余的，但是当我还在写代码的时候，我只是想选择一个单独的条件，如果用户是向上滚动还是向下滚动，那么changing.container的ID是如何结束的显示不同的图像？@Alnitak我有img1/img2/etc的CSS规则，可以为每个图像设置不同的背景。我已经按照你的建议将它们改为类。我最喜欢这个答案，减少了代码使用量，并且与使用
for
循环具有相同的效果。你是对的，我有那些CSS id规则，我将把它们更改为类。我可以要求快速澄清一下吗？使用
.attr（'class'，this.id.replace（'part'，img'））
，您基本上可以放置任何东西来代替
this.id.replace（）
？即使是函数？当然，您也可以将许多其他内容放在那里，包括传递当前值并将其返回值变为新值的函数。