滾動獲取多個div的data-id

Question

問題

我有一系列的div，每個div都有自己的data-id ，當用戶滾動到該div時，我試圖獲取該ID。 當前，該行為僅適用於系列中的第一個，但不適用於所有十個。

目的

• 當用戶向下滾動頁面時，確定他們的位置，以便我可以從他們正在查看的特定photo__group獲取相應的data-id 。
• 根據他們滾動經過的div，將一類is-active到相應的dot__border 。

Codepen

https://codepen.io/onlyandrewn/pen/jpmjaE?editors=1010

scripts.js中

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

的index.html

<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>

Answer 1

您必須使用jQuery .each來迭代所有匹配的元素。 這是您的工作代碼 。

 $(function(){ updateProgressDots(0); $(window).scroll(function(){ getGroupID(); }); function getGroupID() { var scrollPosition = $(window).scrollTop(); $(".photo__group").each(function(index){ var group = $(this); var groupID = group.attr("data-id"); var groupBottom = group[0].offsetHeight+group[0].offsetTop; // 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); } }); } // 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 ie 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(parseInt(groupID)).addClass("is-active"); } }); 

 body { margin: 0; } .dots { position: fixed; right: 48px; bottom: 48px; } .dot { width: 5px; height: 5px; background: #000; border-radius: 50%; } .dot__border { border: 1px solid #000; padding: 4px; margin-bottom: 16px; } .dot__border.is-active { border: 1px solid #c62828; } .dot__border.is-active .dot { background: #c62828; } .photo__group { width: 100vw; height: 100vh; border-bottom: 1px solid #c62828; font-size: 48px; font-family: "Open Sans"; font-weight: 700; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 2

我玩過你的劇本。

首先，我真的不喜歡進行無用的jQuery查找在一個觸發像機關槍...喜歡的事件處理程序的元素scroll 。 這是性能問題。 這些元素是靜態的，因此您應該在此處理程序之外查找它們。

因此，我首先將所有有用的group參數收集到一個對象數組中。

然后，滾動瀏覽這些對象以找到視圖中的組。

獎勵 ，我添加了一個“觸發”參數...決定何時更新點。 我認為視口的中間位置正確……活動點將代表“視口中最靠近”的組。

看一看 ;）

$(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

CodePen