Javascript 获取滚动上多个div的数据id 问题

我有一系列的div，每个div都有自己的

数据id

，我试图在用户滚动到该div时获取该id。目前，该行为仅适用于系列中的第一个div，但不适用于所有十个div

客观的

• 当用户向下滚动页面时，确定他们的位置，以便我可以从他们正在查看的特定

  照片组中获取相应的
  数据id

• 根据他们滚动过去的div，在相应的

  dot\u边框

  中添加一个活动的

  类

代码笔

scripts.js index.html

照片组#1
照片组#2
照片组#3
照片组#4
照片组#5
照片组#6
照片组#7
照片组#8
照片组#9
照片组#10

您必须使用jQuery

。每个

迭代所有匹配的元素。这是你的护照

$（函数（）{
updateProgressDots（0）；
$（窗口）。滚动（函数（）{
getGroupID（）；
});
函数getGroupID（）{
var scrollPosition=$（window.scrollTop（）；
$（“.photo_ugroup”）。每个（功能（索引）{
var组=$（此）；
var groupID=group.attr（“数据id”）；
var groupBottom=group[0]。offsetHeight+group[0]。offsetTop；
//如果用户向下滚动页面，且其滚动位置大于照片组底部，则更新相应的进度点。
如果（滚动位置>组底部）{
updateProgressDots（组ID）；
}
});
}
//此函数用于从所有“点”边框元素中删除“是活动的”类，获取组“数据id”，并将“是活动的”类添加到序列中的该元素，即，如果用户位于第一个组中，则第一个点/点边框应具有“是活动的”类。
函数updateProgressDots（groupID）{
var dotBorder=$（“.dot_uuborder”）；
removeClass（“处于活动状态”）；
dotBorder.eq（parseInt（groupID））.addClass（“处于活动状态”）；
}
});
正文{
保证金：0；
}
.圆点{
位置：固定；
右：48px；
底部：48px；
}
多特先生{
宽度：5px；
高度：5px；
背景：#000；
边界半径：50%；
}
.dot_____边界{
边框：1px实心#000；
填充：4px；
边缘底部：16px；
}
.dot__border.is-active{
边框：1px实心#c62828；
}
.dot\u border.is-active.dot{
背景：#c62828；
}
.照片组{
宽度：100vw；
高度：100vh；
边框底部：1px实心#c62828；
字体大小：48px；
字体系列：“开放式SAN”；
字号：700；
}

照片组#1
照片组#2
照片组#3
照片组#4
照片组#5
照片组#6
照片组#7
照片组#8
照片组#9
照片组#10
我玩了你的剧本

首先，我真的不喜欢在像机关枪一样开火的事件处理程序中对元素执行无用的jQuery查找。。。如
滚动
。这是一个性能问题。元素是静态的，因此您应该在此处理程序之外查找它们

因此，我首先在一个对象数组中收集了所有有用的
组
参数

然后，在scroll上，遍历这些对象以查找视图中的组

奖金，我添加了一个“触发器”参数。。。这是决定何时更新点。我认为视口的中间是正确的位置。。。然后，活动点将表示“视口中最多”的组

看一看；）

$（函数（）{
console.clear（）；
//点位于视口中间时将更新
var scrollTrigger=$（窗口）.height（）/2；
变量组=$（“.photo_u组”）；
//获取所有组参数
var groupDataArray=[]；
组。每个（功能（索引、组）{
变量数据={}；
data.groupID=$（group.data（“id”）；
data.groupBottom=$（组）.offset（）.top+$（组）.outerHeight（）；
data.groupTop=$（组）.offset（）.top；
//控制台日志（数据）；
推送（数据）；
});
//如果用户向下滚动页面，且其滚动位置大于照片组底部，则更新相应的进度点。
$（窗口）。滚动（函数（）{
var scrollPosition=$（window.scrollTop（）；
//在groupDataArray中查找视口中的组
forEach（函数（obj，索引）{
if（obj.groupTopscrollPosition+scrollTrigger）{
console.log（obj.groupID）；
updateProgressDots（obj.groupID）
}
})
})；//结束滚动
//此函数用于从所有“点”边框元素中删除“是活动的”类，获取组“数据id”，并将“是活动的”类添加到序列中的该元素，即，如果用户位于第一个组中，则第一个点/点边框应具有“是活动的”类。
函数updateProgressDots（groupID）{
var dotBorder=$（“.dot_uuborder”）；
removeClass（“处于活动状态”）；
dotBorder.eq（groupID-1）.addClass（“是活动的”）；//eq（）是从零开始的！
}
}); // 准备就绪

var groupID=group.attr（“数据id”）此类有多个元素
attr（）
不返回值数组。只有第一个元素的值。很可能您需要迭代元素（例如使用
each（）
）并对每个元素执行逻辑。您介意分享一段代码片段，说明如何使用
forEach
解决此问题吗？我尝试过这条路，但无法让它返回多个div的数据。
var group=$(“.photo_uugroup”）；groups.each（函数（索引，组）{…在这里为每个$（组）执行逻辑…}）
查找插件…我认为这是您需要的。@An
$(function(){

  $(window).scroll(function(){
    getGroupID();
  });

  function getGroupID() {

    var scrollPosition = $(window).scrollTop();

    var group = $(".photo__group");
    var groupID = group.attr("data-id");
    var groupBottom = group.offset().top + group.outerHeight();

    // If a user scrolls down the page and their scroll position is greater than the bottom of the photo group, update the corresponding progress dots. 
    if (scrollPosition > groupBottom) {
        updateProgressDots(groupID);
    } else {
      updateProgressDots(0);
    }
  }

  // This function removes the `is-active` class from all `dot__border` elements, takes the groups `data-id` and adds a `is-active` class to that element in the series i.e. If the user is on the first group, then the first dot / dot border should have the `is-active` class.
  function updateProgressDots(groupID) {

    var dotBorder = $(".dot__border");
    dotBorder.removeClass("is-active");
    dotBorder.eq(groupID).addClass("is-active");    
  }
});

<div class="dots">
  <div class="dot__border is-active">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>
</div>

<div class="photo__group" data-id="1">Photo group #1</div>
<div class="photo__group" data-id="2">Photo group #2</div>
<div class="photo__group" data-id="3">Photo group #3</div>
<div class="photo__group" data-id="4">Photo group #4</div>
<div class="photo__group" data-id="5">Photo group #5</div>
<div class="photo__group" data-id="6">Photo group #6</div>
<div class="photo__group" data-id="7">Photo group #7</div>
<div class="photo__group" data-id="8">Photo group #8</div>
<div class="photo__group" data-id="9">Photo group #9</div>
<div class="photo__group" data-id="10">Photo group #10</div>

$(function(){
  console.clear();

  // Dots will be updated when at the middle of the viewport
  var scrollTrigger = $(window).height()/2;

  var groups = $(".photo__group");

  // Get all group params
  var groupDataArray = [];
  groups.each(function(index,group){
    var data = {};

    data.groupID = $(group).data("id");
    data.groupBottom = $(group).offset().top + $(group).outerHeight();
    data.groupTop = $(group).offset().top;

    //console.log(data);
    groupDataArray.push(data);
  });

  // If a user scrolls down the page and their scroll position is greater than the bottom of the photo group, update the corresponding progress dots.
  $(window).scroll(function(){
    var scrollPosition = $(window).scrollTop();

    // Look in the groupDataArray to find which group is in viewport
    groupDataArray.forEach(function(obj,index){

      if(obj.groupTop < scrollPosition + scrollTrigger && obj.groupBottom > scrollPosition + scrollTrigger){
        console.log(obj.groupID);
        updateProgressDots(obj.groupID)
      }
    })
  });  // END scroll

  // This function removes the `is-active` class from all `dot__border` elements, takes the groups `data-id` and adds a `is-active` class to that element in the series i.e. If the user is on the first group, then the first dot / dot border should have the `is-active` class.
  function updateProgressDots(groupID) {    
    var dotBorder = $(".dot__border");
    dotBorder.removeClass("is-active");
    dotBorder.eq(groupID-1).addClass("is-active");  // eq() is zero-based !
  }
}); // End ready