0

我本质上是在创建一个看起来很简单的进度条。我有 4 个部分，每个部分上方是进度条。例如，在第 2 部分中，此进度条的第 1 步将以绿色突出显示。对于第 3 部分，此进度条将以绿色突出显示第 1 步和第 2 步等。

类 step-incomplete 与 step-complete 相同，只是背景不同。

目前，我有一些问题。我不知道如何引用每个 div 中的标题。无论我做什么，我什么都得不到或 [object HTMLHeadingElement]。循环本身很好，但我找不到在特定 div 中更改特定标头的类名的方法。

代码如下：

<html>

<head>
  <style type="text/css">
    .step-complete {
      display: inline;
      border-style: hidden;
      background: green;
    }
    .step-incomplete {
      display: inline;
      border-style: hidden;
      background: none;
    }
  </style>

  <script type="text/javascript">
    var numOfSections = 4;

    function changeColour() {
      for (i = 1; i <= numOfSections; i++) {
        if (i != 1) {
          alert(i);
          var progress = document.getElementById('progress-' + i).id;
          alert(progress);
          for (j = i - 1; j >= 1; j--) {
            alert(j);
            var header = document.getElementsByName("step-" + j);
            alert(progress.header.className);

          }
        }
      }
    }

    window.onload = function() {
      changeColour();
    };
  </script>
</head>

<body>

  <button id="push" onclick="changeColour()">click me</button>


  <div id="progress-1">
    <h1 name="step-1" class="step-incomplete">Step1</h1>
    <h1 name="step-2" class="step-incomplete">Step2</h1>
    <h1 name="step-3" class="step-incomplete">Step3</h1>
    <h1 name="step-4" class="step-incomplete">Step4</h1>
  </div>
  <h1 id="header1">Header1</h1>
  <p>..................
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </p>

  <div id="progress-2">
    <h1 name="step-1" class="step-incomplete">Step1</h1>
    <h1 name="step-2" class="step-incomplete">Step2</h1>
    <h1 name="step-3" class="step-incomplete">Step3</h1>
    <h1 name="step-4" class="step-incomplete">Step4</h1>
  </div>
  <h1 id="header2">Header2</h1>
  <p>..................
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </p>

  <div id="progress-3">
    <h1 name="step-1" class="step-incomplete">Step1</h1>
    <h1 name="step-2" class="step-incomplete">Step2</h1>
    <h1 name="step-3" class="step-incomplete">Step3</h1>
    <h1 name="step-4" class="step-incomplete">Step4</h1>
  </div>
  <h1 id="header3">Header3</h1>
  <p>..................
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </p>

  <div id="progress-4">
    <h1 name="step-1" class="step-incomplete">Step1</h1>
    <h1 name="step-2" class="step-incomplete">Step2</h1>
    <h1 name="step-3" class="step-incomplete">Step3</h1>
    <h1 name="step-4" class="step-incomplete">Step4</h1>
  </div>
  <h1 id="header4">Header4</h1>
  <p>..................
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </p>

</body>

</html>

最终目标如下图所示：

最终目标的形象

4

3 回答 3

0

您应该使用querySelector这样您就可以将搜索包含在您正在循环的 div 中

function changeColour() {
  for (var i = 1; i <= numOfSections; i++) {
    if (i != 1) {
      alert(i);
      var progress = document.getElementById('progress-' + i).id;
      alert(progress);
      for (var j = i - 1; j >= 1; j--) {
        // Instead of querying the whole document, query just the current div
        var header = progress.querySelector("h1[step-" + j + "]");
        alert(progress.header.className);


      }
    }
  }
}

或者，您可以获取h1s 的整个列表并遍历那些

  var h1s = progress.querySelectorAll('h1');
于 2016-04-06T13:46:27.197 回答
0

如果我理解这个问题，那么您遇到的问题似乎是document.getElementsByName()返回页面上具有给定名称的所有元素，而不管它们实际位于哪个 div 中。

您可以尝试遍历每个进度 div 的子项：

function changeColour() {
    for(i=1; i<=numOfSections; i++){
        if(i != 1){
            alert(i);
            var progress = document.getElementById('progress-' + i).id;
            alert(progress);
            for(j=0; j<progress.children.length; j++){
                alert(j);
                var segment = progress.children[j];
                alert(segment.className);
            }
        }
    }
}

如果 step<h1>元素是 div 中唯一的东西，这应该按顺序对它们进行操作。如果没有，您可以添加一个额外的步骤来检查元素的名称，甚至可以按特定顺序将子元素添加到 Javascript 数组中以供以后参考。

于 2016-04-06T13:43:20.817 回答
0

对我来说，我想你快到了！不过我敢肯定，使用getElementsByName()，您必须提供一个类似于getElementsByTagName()or的索引getElementsByClass()，所以当您有 -

var header = document.getElementsByName("step-" + j);

我认为它需要

var header = document.getElementsByName("step-" + j) [0] ;

最后加上索引[0]。

于 2016-04-06T13:36:30.277 回答