试图在 div 中引用没有 id 的标头答案

【问题标题】：Trying to reference a header with no id, within a div试图在 div 中引用没有 id 的标头
【发布时间】：2016-04-06 13:26:53
【问题描述】：

我本质上是在创建一个外观简单的进度条。我有 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>

最终目标如下图所示：

image of end goal

【问题讨论】：

您可以尝试在JSFiddle 中重现问题吗？
也许你应该描述你想要完成的事情。目前你所拥有的没有多大意义。 h1 标记中有 name 属性，这在 HTML 中是不允许的。您多次使用相同的名称，因此您的 getElementsByName() 将返回多个结果。而且您存储在变量progress 中的数字肯定不是header 属性。

标签： javascript html css getelementsbyname

【解决方案1】：

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

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

我觉得应该这样

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

在末尾添加索引[0]。

【讨论】：

好吧，也就是说，假设他的 html 中有标题的名称。这应该完全不同。
你将永远只得到第一项，而不是特定 div 下的第一项
我个人同意，这只是我注意到的第一个/最大的问题 - 另外，如果我说实话，我可能不会看到其他问题 =)

【解决方案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 数组中以供以后参考。

【讨论】：

【解决方案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);


      }
    }
  }
}

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

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

【讨论】：