时间戳

首页 > 解决方案 > 如何从 NodeList 的索引开始应用样式？

javascript - 如何从 NodeList 的索引开始应用样式？

问题描述

我希望将元素逐渐“淡化”到活动“步骤”的右侧。我通过迭代 NodeList 并逐步应用不透明度值来做到这一点。我无法重置循环以从活动步骤开始。（它的不透明度值应该为 1）。

笔：https ://codepen.io/abenjamin/pen/JgyKGQ

HTML

<ul class="progress-stepper">
      <li class="step active">
        <p class="step--header">Overview</p>
        <p class="step--description">Iteratively touching base about game changers will make us leaders.</p>
      </li>
      <li class="step">
        <p class="step--header">Payments</p>
        <p class="step--description">Our business impacts markets to intelligently and grow our standard setter.</p>
      </li>
      <li class="step">
        <p class="step--header">Shipping</p>
        <p class="step--description">Globally synergising organic growths is crucial to our wholesale stand-up.</p>
      </li>
      <li class="step">
        <p class="step--header">Returns</p>
        <p class="step--description">Hello world! This is a test.</p>
      </li>
      <li class="step">
        <p class="step--header">Contacts</p>
        <p class="step--description">Hello world! This is a test.</p>
      </li>
    </ul>

JS

function fader(){
  for (i = 0; i < stepCount; i++) { 
    let fraction = 1/stepCount;
    let opacityValue = 1-(fraction*i);
    step[i].style.cssText = "opacity:"+opacityValue+";";
    console.log(opacityValue);
  };
};

标签： javascriptcssarrays

解决方案

如果我理解正确，您希望不透明度相对于当前活动步骤线性“下降”。

classList一个简单的解决方案是通过检查类的步骤 NodeList 中每个节点的索引来查找活动步骤的索引active。一旦找到，您就可以迭代相对于该索引的步骤 NodeList，并相应地计算步骤不透明度。

例如，您可以fader()按如下方式更新以实现此目的：

function fader(){

  /* Calculate index of active step */
  let activeIndex = 0;
  for(i = 0; i < stepCount; i++) {
    if(step[i].classList.contains('active')) {
      activeIndex = i;
      break;
    }    
  }

  /* Iterate range of steps relative to activeIndex */
  for (i = activeIndex; i < stepCount; i++) { 

    /* Calculate linear opacity fall off for current step */
    let opacityAsc = (i - 1 - activeIndex) / (stepCount - activeIndex);
    let opacityDes = 1 - opacityAsc;

    step[i].style.opacity = opacityDes;
  };
};

这是您的 codepen 的修改分支： https ://codepen.io/anon/pen/mNMBba

希望有帮助！

推荐阅读