尝试在div中引用没有id的标头
我基本上是在创建一个看起来很简单的进度条。我有4个部分，每个部分的上方是进度条。例如，在第2节中，此操作的进度条将以绿色突出显示步骤1。对于第3节，进度条将以绿色突出显示步骤1和2。
类step-complete与step-complete相同，只是背景不同。
目前，我有几个问题。我找不到如何引用每个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
回答 3
Stack Overflow用户
发布于 2016-04-06 21:36:30
对我来说，我想你就快到了！但我确信，使用getElementsByName()时，您必须提供一个类似于getElementsByTagName()或getElementsByClass()的索引，因此，当您拥有-
步骤变量头部=document.getElementsByName(“
-”+ j)；
我认为它应该是
步骤var
= document.getElementsByName("step-“+ j)；
将索引添加到[0].的末尾
Stack Overflow用户
发布于 2016-04-06 21:43:21
如果我理解这个问题，看起来您遇到的问题是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);
}
}
}
}如果div中只有step <h1>元素，那么应该按顺序对它们进行操作。如果没有，您可以添加一个额外的步骤来检查元素的名称，甚至可能以某种特定的顺序将子元素添加到Javascript数组中，以供以后引用。
Stack Overflow用户
发布于 2016-04-06 21:46:27
您应该使用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');https://stackoverflow.com/questions/36452579
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号