2

我正在尝试使用 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 次。我尝试使用这样的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]");
       }
    });
}

但同样，不起作用。是否可以像我所做的那样用方括号转义选择器？如果不是，那么实现这一目标的正确方法是什么？

4

3 回答 3

4

假设航点插件编写正确并处理多个元素：

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

根据需要添加方向检查。

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

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

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

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

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

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

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

于 2013-01-11T23:07:03.323 回答
1

你可以这样试试

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

而不是单独的ID，我会使用css类并且这样做你不需要循环

于 2013-01-11T23:03:06.003 回答
0

相反，如果使用方括号，为什么不：

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

然后，您只需按 id 选择，并动态创建 id。

于 2013-01-11T23:02:28.393 回答