-2
我目前在JavaScript中使用onclick函數來顯示存儲在數組中的信息，具體取決於用戶選擇哪個元素。然後我需要另一個onclick函數，它允許我做同樣的事情（基於選擇顯示內容），但是基於選擇的數組索引值。第一種方法效果很好，因爲用戶選擇基於ID。我還沒有成功的第二種方法，因爲我還沒有想出如何顯示基於選擇數組索引值的內容。對於這個項目，強烈推薦使用JavaScript。如何在數組索引值中使用JavaScript onclick函數
選擇一個專業（元素標記爲生物學）後，用戶將選擇其中一個職位名稱，如存儲在bioArray [1] [2]中的「Genetic Counselor」和bioArray的innerHTML [4]和然後bioArray [5]會顯示該職位唯一的工資信息。我將顯示的信息將存儲在每個職位的單獨陣列 - 例如：geneticCounselor []
我的想法是通過使用嵌套數組我可以找到一種方法，允許我顯示一旦選擇的內容是基於指數值。到目前爲止，我已經看到討論事件冒泡和「this」的方法，但不相信這些方法滿足我的要求。
見JS斌演示：http://jsbin.com/dolucowuwu/edit?html,css,js,output
CSS：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
h4 {
border: 1px solid black;
border-radius: 8px;
padding: 10px 2px 10px 2px;
margin: 20px 20px 0px 20px;
background-color: #F0F0F0;
border-color: #F8F8F8;
color: #505050;
cursor: pointer;
}
.active {
background-color: #99E6FF;
}
p {
font-size: 1.3em;
}
</style>
HTML：
<div class="container contentContainer">
<div id="pTwoRowOne">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 row row-centered">
<h4 id="bio" class="selected">Biology</h4>
</div>
</div>
</div>
<div id="pTwoRowTwo">
<div class="row">
<div class="row col-md-6">
<h3 id="major" class="col-md-12 row row-centered">Select a major from above</h3>
<h3 id="majorRep" class="col-md-12 row row-centered"></h3>
<p id="jobs" class="col-md-12 selectedTwo"></p>
<p id="skills"class="col-md-12"></p>
<p id="salaryRange" class="col-md-12"></p>
<p id="salaryRangeOC" class="col-md-12"></p>
<p id="salaryAvg" class="col-md-12"></p>
</div>
</div>
</div>
</div>
的JavaScript：
var H4 = document.getElementsByClassName("selected"), act;
[].forEach.call(H4, function(el){
el.addEventListener("click", function(){
if(act) act.classList.remove("active");
return (this.classList.toggle("active"), act=this);
});
});
var bioArray = [
"Biology",
['Common Job Titles: Biological/Lab Technician',' Medical and Health Services Manager',' Genetic Counselor'],
"Skills in Demand: Relevant Certifications and Degree Programs Required",
"Major Salary Range: $35,000 to $120,000 +",
"Occupation Salary Range: Select a Job Title",
"Average Salary: Select a Job Title"
];
document.getElementById("bio").onclick=function() {
document.getElementById("majorRep").innerHTML = bioArray[0];
document.getElementById("jobs").innerHTML = bioArray[1];
document.getElementById("skills").innerHTML = bioArray[2];
document.getElementById("salaryRange").innerHTML = bioArray[3];
document.getElementById("salaryRangeOC").innerHTML = bioArray[4];
document.getElementById("salaryAvg").innerHTML = bioArray[5];
}
var geneticCounselor = [
"Occupation Salary Range: $45,000 to $90,000",
"Average Salary: $57,000"
];
到目前爲止，這似乎運作良好，我可能有一些在完全實施的問題，但到目前爲止，一切順利。感謝您的幫助，因爲我被其他工作束縛了一下，所以我現在才能夠繼續！ – Hambone
很高興它解決了你的問題:)。 – fuyushimoya
也許你可以在幾件事情上略見一斑，當多次選擇一個專業時，它會多次附加（我嘗試通過使用「.one」函數來解決這個問題，但這並不符合我的意圖）。同樣，當選擇一個新的專業時，它會追加上一份工作清單下面的工作清單，然後編譯成一個大清單，而不是替換以前的工作清單（我還嘗試使用「.replaceWith」解決了一個問題並創建了另一個清單）... I編輯你的作品，以反映我一直在忙着的工作，讓我知道你是否需要澄清 – Hambone