javascript - 针对所有 child 而不是仅针对一个 child

Question

这是 fiddle :https://jsfiddle.net/c1d3tfnL/

这是一个很大的 HTML 代码，但唯一重要的是部分名称和顶部的侧面导航。使用此 jQuery 代码:

$(window).scroll(function(){

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

  panel.each(function(){
    if($(this).offset().top + $(this).height() > cutoff){
      panel.removeClass('current');
      $(this).addClass('current');
      return false;
    }
  })

  var aChildren = $('.side ul').children();
  var aArray = [];
  for (var i=0; i < aChildren.length; i++) {
    var aChild = aChildren[i];
    var ahref = $(aChild).attr('id');
    aArray.push(ahref);
  }

  for (var i=0; i < aArray.length; i++) {
    var theID = aArray[i];

    if (panel.hasClass('current')) {
      $("a[href='#" + theID + "']").addClass('greens');

  } else {
      $("a[href='#" + theID + "']").removeClass('greens');
  }
}

我应该将类 greens 添加到具有类 current 的部分。但是 greens 类出现在每个部分。我也不确定问题出在哪里。 我添加了这个:

if (panel.hasClass('current')) {
      $("a[href='#" + theID + "']").addClass('greens');

  } else {
      $("a[href='#" + theID + "']").removeClass('greens');
  }

但它只是忽略了代码。有什么想法吗？ 我知道 fiddle 有点乱，但我无法将所有内容发送到这里，因为私有(private)服务器上有很多部分。

Answer 1

如果我在您需要帮助的地方附近，请告诉我 - 主要目标是尝试复制您所描述的内容。然而，这段代码不是循环遍历面板的子元素，而是依靠 CSS 来为我们定位子元素。 (所以，这个响应的实质内容可以在代码片段的 CSS 部分找到)。

如果您知道您的面板具有类.current；使用 CSS，您可以通过编写以下内容来定位子 anchor 标记:

.panel.current a{
   background-color: green;
}

节省您的代码(和理智)，避免 try catch 和循环子元素的每个 block 。

(抱歉，我的代码示例是用 Vanilla JavaScript 编写的——自从我使用 jQuery 以来已经很长时间了)

  // get all of the elements with the class .panel
const panelNodeList = document.getElementsByClassName('panel');
  // convert the NodeList of panels into a proper array
const panels = [...panelNodeList];

  // assign the classname .current to the first panel (on load)
panels[0].classList.add('current');

  // since the position of the .panel elements won't change,
  // saving the top position(s) in an array just to save a
  // a little processing time
let offsets = panels.map( panel => panel.getBoundingClientRect().top );


  // listen to the scroll event on the window element
window.addEventListener('scroll', function(e){
    // get the scrollY position of the window (and add 10px to 
    // give the elements some breathing room)
  let pos = window.scrollY + 10;
  
    // remove the .current class from all the panels
  panels.forEach( panel => panel.classList.remove('current') );
  
    // compare the scroll position of the window vs. the 
    // panel element(s) top offset
    // go through the array list in reverse to stop execution 
    // when the first match is found (instead of trying to
    // compare against the next element in the array)
  for( let i=offsets.length, x=0; i>=x; i-- ){
    if( pos > offsets[i] ){
        // if the scroll position is greater than the 
        // offset, then it's the most top element visible
        // add the class .current
      panels[i].classList.add('current');
        // break -- to stop the loop
      break;
    }
  }
  
});

.panel{
  padding: 10px;
  margin: 5px;
  border: solid 1px black;
}
.panel a{
  display: block;
}

.panel.current{
  background-color: #333333;
}
.panel.current a{
  color: green;
}

<div class="panel">
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
</div>

<div class="panel">
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
</div>

<div class="panel">
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
</div>

<div class="panel">
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
</div>

<div class="panel">
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
</div>

<div class="panel">
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
</div>

<div class="panel">
  <a href="#">lorem</a>
  <a href="#">ipsum</a>
</div>

<div class="panel" style="height: 3000px;"></div>