我设法编写了一些javascript代码来遍历三列并显示特定的HTML元素。它循环通过第一列然后停止。我似乎无法让它更改计数器变量来更改列。请在下面找到我正在使用的代码。
window.onload = function load() {
var counter = 1;
var id = "col" + counter;
var skills = document.getElementById(id).getElementsByTagName("p");
var progress = document.getElementsByTagName("span");
for (i = 0; i < progress.length; i++) {
console.log(counter);
console.log(skills.length);
if (i < skills.length) {
counter++;
}
console.log(i);
alert("Skill: " + skills[i].innerHTML + "; " + "Progress: " + progress[i].innerHTML)
}
document.getElementById("skills").innerHTML = skills[0].innerHTML;
document.getElementById("progress").innerHTML = progress[0].innerHTML;
}.resume {
width: 816px;
margin: 48px 48px 48px 48px;
font-size: 13px;
line-height: 16px;
}
.header {
text-align: center;
line-height: 4px;
}
.header hr {
margin: 5px;
}
.name {
text-transform: uppercase;
font-size: 32px;
}
.contact p {
margin: 10px;
}
.summary h2,
.skills h2,
.professionalhistory h2,
.education h2 {
text-align: center;
text-transform: uppercase;
font-size: 24px;
margin-top: 15px;
margin-bottom: 15px;
}
.skills {
line-height: 13px;
}
.skills p {
margin: 8px 8px 8px 8px;
}
.progress {
background-color: #BCBEBF;
text-align: left;
position: relative;
height: 13px;
margin: 8px 8px 8px 8px;
}
.progress-bar {
background-color: #323232;
text-align: left;
line-height: 13px;
padding: 1px 10px 2px;
}
.progress-bar span {
padding: 1px 10px 2px;
position: absolute;
z-index: 2;
color: white;
top: 50%;
left: 0%;
transform: translate(0%, -50%);
}
.employer {
font-size: 16px;
font-weight: bold;
}
.position {
text-decoration: underline;
}
.description {
width: 95%;
margin-left: 12px;
}
.results {
font-weight: bold;
}
.titles {
text-decoration: underline;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | Resume</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jsTest.js"></script>
<script src="https://use.fontawesome.com/55fed2cea8.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="resume">
<div class="row">
<div class="col-lg-12">
<div class="header">
<h1 class="name">Troy Andrew Pilewski</h1>
<hr />
<div class="contact">
</div>
<hr />
<hr />
</div>
<div class="skills">
<h2>Possesses Advance Knowledge Of</h2>
<div class="row">
<div id="col1" class="col-lg-4">
<p>Microsoft Operating Systems</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%">
<span>13 Years</span>
</div>
</div>
<p>Microsoft Office SharePoint Services</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:53.85%">
<span>7 Years</span>
</div>
</div>
<p>Microsoft Active Directory</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%">
<span>13 Years</span>
</div>
</div>
<p>Microsoft Exchange Services</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%">
<span>13 Years</span>
</div>
</div>
<p>Microsoft Office Suite</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%">
<span>13 Years</span>
</div>
</div>
<p>Cisco Networking Devices</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%">
<span>13 Years</span>
</div>
</div>
<p>VMWare Products</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%">
<span>9 Years</span>
</div>
</div>
</div>
<div id="col2" class="col-lg-4">
<p>Project Management</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:38.46%">
<span>5 Years</span>
</div>
</div>
<p>Personnel Management</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%">
<span>9 Years</span>
</div>
</div>
<p>Training and Development</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%">
<span>9 Years</span>
</div>
</div>
<p>Customer Service Relations</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:61.54%">
<span>8 Years</span>
</div>
</div>
<p>Performance Management</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%">
<span>9 Years</span>
</div>
</div>
<p>Oral Expressive</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100.00%">
<span>13 Years</span>
</div>
</div>
<p>Critical Thinker</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100.00%">
<span>13 Years</span>
</div>
</div>
</div>
<div id="col3" class="col-lg-4">
<p>Complex Problem Solver</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100.00%">
<span>13 Years</span>
</div>
</div>
<p>Attention to Detail</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100.00%">
<span>13 Years</span>
</div>
</div>
<p>Sandler Sales Concepts</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:23.08%">
<span>3 Years</span>
</div>
</div>
<p>Visual Basic for Applications</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%">
<span>9 Years</span>
</div>
</div>
<p>Java Application Development</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:7.69%">
<span>1 Years</span>
</div>
</div>
<p>Microsoft Visual Studio</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:84.62%">
<span>11 Years</span>
</div>
</div>
<p>Microsoft SharePoint Designer</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:38.46%">
<span>5 Years</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
我希望看到你声称要做的事情的嵌套循环...基本上，这样的事情
window.onload = function load() {
for(col = 1; col <= 3; col++) {
var id = "col" + col;
var contain = document.getElementById(id);
// get skills inside the current "contain" (column)
var skills = contain.getElementsByTagName("p");
// get progress inside the current "contain" (column)
var progress = contain.getElementsByTagName("span");
for (i = 0; i < progress.length; i++) {
// do things for each span in a column here
}
// do things for each column
}
}
答案 1 :(得分：0)
使用嵌套for循环尝试我的更改;我修改的只是javascript。
window.onload = function load() {
var counter = 1;
var progress = document.getElementsByTagName("span");
for (i = 0; i < progress.length; i++) {
var id = "col" + (i+1);
var skills = document.getElementById(id).getElementsByTagName("p");
for(j = 0; j < skills.length; j++)
alert("Skill: " + skills[j].innerHTML + "; " + "Progress: " + progress[i].innerHTML)
}
document.getElementById("skills").innerHTML = skills[0].innerHTML;
document.getElementById("progress").innerHTML = progress[0].innerHTML;
}