如何使用带有数组索引值的 JavaScript onclick 函数
[英]How to use JavaScript onclick Functions with Array Index Values
问题描述
I am currently using an onclick function in JavaScript to display information stored in an array depending on which element a user selects on.
我目前在 JavaScript 中使用 onclick 函数来显示存储在数组中的信息，具体取决于用户选择的元素。 I then need another onclick function that allows me to do the same thing (display content based on selection) but based on an array index value that was selected.然后我需要另一个 onclick 函数，它允许我做同样的事情（显示基于选择的内容）但基于选择的数组索引值。 The first method works well because the user selection is based off an ID.第一种方法效果很好，因为用户选择基于 ID。 I haven't been successful with the second method because I haven't figured out how to display content based off the selection of an array index value.我没有成功使用第二种方法，因为我还没有弄清楚如何根据数组索引值的选择来显示内容。 Using JavaScript is strongly preferred for this project.本项目强烈建议使用 JavaScript。
After choosing a major (the element labeled biology) the user would then select on one of the Job Titles, say “Genetic Counselor” stored in bioArray[1] [2], and the innerHTML of bioArray [4] and bioArray[5] would then display salary information unique to that Job Title.在选择一个专业（标记为生物学的元素）后，用户将选择其中一个职位，比如存储在 bioArray[1] [2] 中的“遗传顾问”，以及 bioArray [4] 和 bioArray[5] 的 innerHTML然后将显示该职位唯一的工资信息。 The information that I would be displaying would be stored in a separate array for each job title - ex: geneticCounselor []我将显示的信息将存储在每个职位的单独数组中 - 例如：genericCounselor []
My thoughts were by using nested arrays I may find a method that allows me to display content once selected that is based on the index value.我的想法是通过使用嵌套数组，我可能会找到一种方法，该方法允许我在选择后显示基于索引值的内容。 So far, I have seen methods discussing event bubbling and “this” but do not believe these methods satisfy my requirements.到目前为止，我已经看到讨论事件冒泡和“this”的方法，但不相信这些方法满足我的要求。
See JS Bin Demo: http://jsbin.com/dolucowuwu/edit?html,css,js,output见JS Bin Demo： http : //jsbin.com/dolucowuwu/edit?html,css, js, output
CSS: 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: 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: 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"
];
3 个解决方案
解决方案1
1 已采纳 2015-06-18 17:47:03
I've altered most of your data and web site to create a more maintainable example:我已经更改了您的大部分数据和网站，以创建一个更易于维护的示例：
- I choose to use a library called jquery, which can helps you a lot when manipulating dom elements and bind events.我选择使用一个名为 jquery 的库，它可以在操作 dom 元素和绑定事件时为您提供很多帮助。
- Analyze your data, remove reusable words to html, and make the data structure more meaningful.分析你的数据，把可重用的词去掉到html，让数据结构更有意义。
- Add some class to control/listen to the target events more easily.添加一些类来更轻松地控制/收听目标事件。
And below is what it become:下面是它变成的样子：
// Reform of datastructure. var MainCategory = { 'Biology': { 'jobs': [' Biological/Lab Technician,', ' Medical and Health Services Manager,', ' Genetic Counselor'], 'skills': 'Relevant Certifications and Degree Programs Required, Analysis, ANOVA, Attention to Detail, Analytical, Biological Data Collection, Data Entry, DNA Isolation/Sequencing', 'salaryRange': '$335,000 to $120,000 +', 'salary': '$35,000 to $120,000 +' }, 'Cartography': { 'jobs': [' City Planner,', ' Natural Resource Manager,', ' Environmental Planner,', ' GIS Analyst,', ' GIS Specialist,', ' Cartographer'], 'skills': 'Relevant Certifications and Degree Programs Required, ArcGIS Mapping Suite, Python Programming, Photogrammetry, Attention to Detail, Visual Basic/.NET', 'salaryRange': '$40,000 to $115,000 +', 'salary': '$35,000 to $120,000 +' } }; var Jobs = { ' Biological/Lab Technician,': { 'Salary': '$95,000 to $110,000', 'AverageSalary': '$87,000' }, ' Medical and Health Services Manager,': { 'Salary': '$75,000 to $90,000', 'AverageSalary': '$57,000' }, ' Genetic Counselor': { 'Salary': '$45,000 to $90,000', 'AverageSalary': '$57,000' }, ' City Planner,': { 'Salary': '$775,000 to $90,000', 'AverageSalary': '$57,000' } }; // Get main element blocks var mainSelect = $('#mainSelect'); var cart = $('#cart'); var details = $('#details'); // Put in main category info. $.each(MainCategory, function(key) { var option = $('<h4>'); option.text(key).data('category', key).appendTo(mainSelect); }) // Define event handler var showDetail = function(category) { var categoryData = MainCategory[category]; // Do nothing if no detail info. if (typeof categoryData === 'undefined') { details.toggle(false); return; } details.toggle(true); // Put info to each detail element $.each(categoryData, function(key, value) { var info = details.find('#' + key); if (key === 'jobs') { // Create a selectable job list. info.children().remove(); $.each(value, function(id, job) { var jobOption = $('<span>'); jobOption.addClass('job').data('job', job).text(job).appendTo(info); }); } else { info.find('span').text(value); } }); // Set default display text for those job related info. details.find('.job-related span').text('Select a Job Title'); }; // var showJobDetail = function(job) { var jobInfo = Jobs[job], jobSalary, jobAverageSalary; if (typeof jobInfo === 'undefined') { details.find('.job-related span').text('Select a Job Title'); } else { jobSalary = jobInfo.Salary ? jobInfo.Salary : 'Lack of info.'; jobAverageSalary = jobInfo.AverageSalary ? jobInfo.AverageSalary : 'Lack of info.' details.find('#jobSalary span').text(jobSalary); details.find('#jobAverageSalary span').text(jobAverageSalary); } } // Setup events. mainSelect.on('click', 'h4', function() { $(this).siblings('.active').removeClass('active'); $(this).addClass('active'); var category = $(this).data('category'); showDetail(category); }); // Bind events to job list. details.on('click', 'span.job', function() { var job = $(this).data('job'); showJobDetail(job); });
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; } .fontIncrease { font-size: 1.2em; margin-bottom: 10px; } .pointerClass:hover { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="mainSelect" class="selected"></div> <div id="cart" class="selected"></div> <div id="details" style="display:none"> <div id="jobs" class="fontIncrease pointerClass"> Related Job Titles: <span></span> </div> <div id="skills" class="fontIncrease"> Skills in Demand: <span></span> </div> <div id="salaryRange" class="fontIncrease"> Major Salary Range: <span></span> </div> <div id="jobSalary" class='job-related fontIncrease'> Occupation Salary Range: <span></span> </div> <div id="jobAverageSalary" class='job-related fontIncrease'> Average Salary: <span></span> </div> </div>
If you have question about the code, feel free to ask!如果您对代码有疑问，请随时提问！
解决方案2
0 2015-06-18 17:33:10
You question could be better explained, but I think I've got your point.你的问题可以更好地解释，但我想我明白你的意思。 There are many ways to achieve what you want, and I see no reason why you wouldn't get any closer than what you've got (apart from being lazy =P ).有很多方法可以实现你想要的，我看不出你为什么不比你所拥有的更接近（除了懒惰 =P ）。
Anyway, let me try to help you.无论如何，让我试着帮助你。
You could be working with objects.您可能正在处理对象。 They would make your life easier.他们会让你的生活更轻松。 So let's build an object for the jobs:因此，让我们为作业构建一个对象：
var jobs = {
'geneticCounselor': {
'jobName': 'Genetic Counselor',
'occupationSalaryRange': '$45,000 to $90,000',
'averageSalary': '$57,000'
},
'biologicalLabTechnician': {
'jobName': 'Biological/Lab Technician',
'occupationSalaryRange': '$00,000 to $00,000',
'averageSalary': '$00,000'
},
//...Keep adding jobs
};
Now you have control over the information you want to handle.现在您可以控制要处理的信息。 If you don't know JS objects, I suggest you reading this article .如果你不了解 JS 对象，我建议你阅读这篇文章。 Now let's create our HTML accordingly to our objects:现在让我们根据我们的对象创建我们的 HTML：
document.getElementById("bio").addEventListener('click', function() {
//Access each job in our object
for (var key in jobs) {
//get the job object reference
var job = jobs[key];
//Create a HTML element do display the information
var p = document.createElement('p');
//Creates a reference to keep track on our 'jobs' object
p.setAttribute('data-job', key);
//Set the text of the element
p.textContent = job.jobName;
//Add function to each job
p.addEventListener('click', function() {
//Retrieve the obj reference in the HTML element
var dataJob = this.getAttribute('data-job');
//Use the HTML element reference to get the OBJ reference, where the info is stored
var job = jobs[dataJob];
//Set the job info into the <p>
document.getElementById('salaryRange').textContent = job.occupationSalaryRange;
//Set the job info into the <p>
document.getElementById('salaryAvg').textContent = job.averageSalary;
});
//Put the element on the page
document.getElementById('jobs').appendChild(p);
}
So my full JS is:所以我的完整 JS 是：
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 jobs = {
'geneticCounselor': {
'jobName': 'Genetic Counselor',
'occupationSalaryRange': '$45,000 to $90,000',
'averageSalary': '$57,000'
},
'biologicalLabTechnician': {
'jobName': 'Biological/Lab Technician',
'occupationSalaryRange': '$00,000 to $00,000',
'averageSalary': '$00,000'
}
};
document.getElementById("bio").addEventListener('click', function() {
//Access each job in our object
for (var key in jobs) {
//get the job object reference
var job = jobs[key];
//Create a HTML element do display the information
var p = document.createElement('p');
//Creates a reference to keep track on our 'jobs' object
p.setAttribute('data-job', key);
//Set the text of the element
p.textContent = job.jobName;
//Add function to each job
p.addEventListener('click', function() {
//Retrieve the obj reference in the HTML element
var dataJob = this.getAttribute('data-job');
//Use the HTML element reference to get the OBJ reference, where the info is stored
var job = jobs[dataJob];
//Set the job info into the <p>
document.getElementById('salaryRange').textContent = job.occupationSalaryRange;
//Set the job info into the <p>
document.getElementById('salaryAvg').textContent = job.averageSalary;
});
//Put the element on the page
document.getElementById('jobs').appendChild(p);
}
});
Be aware that there are other ways (and better ones) to achieve these type of results.请注意，还有其他方法（和更好的方法）可以实现这些类型的结果。 You should read some stuff about HTML / DOM manipulation with JS to have a better knowledge.您应该阅读一些有关使用 JS 进行 HTML / DOM 操作的内容，以获得更好的知识。
解决方案3
0 2015-10-15 09:06:55
// Reform of datastructure. var MainCategory = { 'Biology': { 'jobs': [' Biological/Lab Technician,', ' Medical and Health Services Manager,', ' Genetic Counselor'], 'skills': 'Relevant Certifications and Degree Programs Required, Analysis, ANOVA, Attention to Detail, Analytical, Biological Data Collection, Data Entry, DNA Isolation/Sequencing', 'salaryRange': '$335,000 to $120,000 +', 'salary': '$35,000 to $120,000 +' }, 'Cartography': { 'jobs': [' City Planner,', ' Natural Resource Manager,', ' Environmental Planner,', ' GIS Analyst,', ' GIS Specialist,', ' Cartographer'], 'skills': 'Relevant Certifications and Degree Programs Required, ArcGIS Mapping Suite, Python Programming, Photogrammetry, Attention to Detail, Visual Basic/.NET', 'salaryRange': '$40,000 to $115,000 +', 'salary': '$35,000 to $120,000 +' } }; var Jobs = { ' Biological/Lab Technician,': { 'Salary': '$95,000 to $110,000', 'AverageSalary': '$87,000' }, ' Medical and Health Services Manager,': { 'Salary': '$75,000 to $90,000', 'AverageSalary': '$57,000' }, ' Genetic Counselor': { 'Salary': '$45,000 to $90,000', 'AverageSalary': '$57,000' }, ' City Planner,': { 'Salary': '$775,000 to $90,000', 'AverageSalary': '$57,000' } }; // Get main element blocks var mainSelect = $('#mainSelect'); var cart = $('#cart'); var details = $('#details'); // Put in main category info. $.each(MainCategory, function(key) { var option = $('<h4>'); option.text(key).data('category', key).appendTo(mainSelect); }) // Define event handler var showDetail = function(category) { var categoryData = MainCategory[category]; // Do nothing if no detail info. if (typeof categoryData === 'undefined') { details.toggle(false); return; } details.toggle(true); // Put info to each detail element $.each(categoryData, function(key, value) { var info = details.find('#' + key); if (key === 'jobs') { // Create a selectable job list. info.children().remove(); $.each(value, function(id, job) { var jobOption = $('<span>'); jobOption.addClass('job').data('job', job).text(job).appendTo(info); }); } else { info.find('span').text(value); } }); // Set default display text for those job related info. details.find('.job-related span').text('Select a Job Title'); }; // var showJobDetail = function(job) { var jobInfo = Jobs[job], jobSalary, jobAverageSalary; if (typeof jobInfo === 'undefined') { details.find('.job-related span').text('Select a Job Title'); } else { jobSalary = jobInfo.Salary ? jobInfo.Salary : 'Lack of info.'; jobAverageSalary = jobInfo.AverageSalary ? jobInfo.AverageSalary : 'Lack of info.' details.find('#jobSalary span').text(jobSalary); details.find('#jobAverageSalary span').text(jobAverageSalary); } } // Setup events. mainSelect.on('click', 'h4', function() { $(this).siblings('.active').removeClass('active'); $(this).addClass('active'); var category = $(this).data('category'); showDetail(category); }); // Bind events to job list. details.on('click', 'span.job', function() { var job = $(this).data('job'); showJobDetail(job); });
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; } .fontIncrease { font-size: 1.2em; margin-bottom: 10px; } .pointerClass:hover { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="mainSelect" class="selected"></div> <div id="cart" class="selected"></div> <div id="details" style="display:none"> <div id="jobs" class="fontIncrease pointerClass"> Related Job Titles: <span></span> </div> <div id="skills" class="fontIncrease"> Skills in Demand: <span></span> </div> <div id="salaryRange" class="fontIncrease"> Major Salary Range: <span></span> </div> <div id="jobSalary" class='job-related fontIncrease'> Occupation Salary Range: <span></span> </div> <div id="jobAverageSalary" class='job-related fontIncrease'> Average Salary: <span></span> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用JavaScript捕获数组onclick的索引 - Capturing index of an array onclick with JavaScript
如何在索引不为 0 的 Javascript 数组上使用数组解构？ - How to use array destructuring on Javascript array with index of not 0?
如何在 javascript 中索引 onclick - how to index inside onclick in javascript
如何使函数在 onclick 中使用 - how to make functions to use in onclick
如何在JavaScript中使用onclick - How to use onclick in JavaScript
在 onClick 事件中取数组索引值 - Take array Index values in onClick event
如何使用javascript中的onclick将数组中的复选框值传递给函数 - how to pass checkbox values in an array to a function using onclick in javascript
在Javascript中使用onclick转到数组的下一个索引 - go to the next index of an array using onclick in Javascript
如何通过使用onclick事件中的函数并使用循环从函数中的数组中计数函数来调用多个JavaScript函数？ - How to call multiple JavaScript functions by using function in onclick event and using loop to count functions from array in function?
如何获取php数组索引并在javascript中使用它 - How to get a php array index and use it in javascript
相关标签