Question

我实际上是在创建一个简单的进度条。我有4个部分，每个部分上面是进度条。例如，在第2部分中，此处的进度条将以绿色突出显示第1步。对于第3部分，此处的进度条将以绿色等突出显示第1步和第2步。

类步骤不完全与步骤完成相同，只是背景不同。

目前，我有一些问题。我无法找到如何引用每个div中的标头。无论我做什么，我都得不到任何东西或[对象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>

最终目标如下图所示：

image of end goal

Answer 1

对我来说，我觉得你快到了！我敢肯定，使用getElementsByName()，你必须提供类似于getElementsByTagName()或getElementsByClass()的索引，所以当你有 -

时

var header = document.getElementsByName（“step-”+ j）;

我认为需要

var header = document.getElementsByName（“step-”+ j） [0] ;

最后添加了索引 [0] 。

Answer 2

如果我理解了这个问题，那么您遇到的问题似乎是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);
            }
        }
    }
}

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

Answer 3

你应该使用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);


      }
    }
  }
}

或者你可以获得h1的整个列表并迭代那些

  var h1s = progress.querySelectorAll('h1');

尝试在div中引用没有id的标头

3 个答案: