Question

我正在尝试使用jquery waypoint插件动态更改页面的背景（它告诉您元素何时位于视口的顶部或底部）。我的HTML很简单 - 我有多个标题，标识为#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]");
       }
    });
}

但是，再次，不工作。是否可以像我一样用方括号来逃避选择器？如果没有，实现这一目标的正确方法是什么？

Answer 1

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

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

根据需要添加方向检查。

我不熟悉这个插件，但关键部分是你应该能够将waypoint插件绑定到多个元素，然后在事件处理程序中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可以包含多个值，所以完全覆盖类列表比删除前一个类（无论是什么）更简单然后添加新的。

Answer 2

你可以这样试试

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类，并且这样做你不需要循环

Answer 3

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

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

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

jQuery for循环切换id

3 个答案: