我正在尝试建立一个有人物肖像的网站，并且用户将能够单击肖像以查看有关该人物的更多信息。下面的文本框将在单击每个配置文件时更改文本描述。
我试图使图像成为各种按钮，然后通过java脚本应用click事件以更改描述文本。
我有以下代码：
HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>About</title>
<link rel="stylesheet" type="text/css" href="Styles.css" />
<script src="Scripts/jquery-3.3.1.intellisense.js"></script>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<header>
<img src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />
<h1 id="title">
CompTech Inc. 2018 Conference
</h1>
</header>
<nav id="navbar">
<span>
<a href="Indedx.html">Home</a>
<a href="Program.html">Program</a>
<a href="About.html" class="inactivelink">About</a>
<a href="Registration.html">Registration</a>
<a href="Sitemap.html">Sitemap</a>
</span>
</nav>
<main>
<div id="container">
<article>
<section id="personnel">
<h2>Personnel</h2>
<p>Find out more about the staff that you will be meeting at the event</p>
<button id="jim" class="profile"></button>
<button id="arcturus" class="profile"></button>
<button id="sarah" class="profile"></button>
<button id="jaina" class="profile"></button>
<div id="descriptioncontainer">
<p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
</div>
</section>
</article>
</div>
</main>
<footer>
<img src="Images/Logo.png" id="logofooter" class="logo" alt="CompTech Logo" />
<p>
<strong>© Copyright CompTech Inc.</strong> <br />
<address>123 Knotareal Pl, Sydney CBD, NSW, 2018</address>
customerservice@comptech.org <br />
(02) 6258 7412
</p>
</footer>
<script src="About.js"></script>
</body>
</html>
JS
(function clickEvent() {
var portraits = document.getElementByClassName("profile");
var counter;
for (counter = 0; counter < profile.length; counter++) {
portraits[counter].onclick = function () {
}
}
})
CSS
button.profile.active, button.profile:hover {
cursor:pointer;
}
.profile {
width: 250px;
height: 250px;
display: inline-block;
margin-top:2%;
}
#jim {
background-image: url('Images/JimRaynor.png');
}
#arcturus {
background-image: url('Images/ArcturusMensk.png');
}
#sarah {
background-image: url('Images/SarahKerrigan.png');
}
#jaina {
background-image: url('Images/JainaProudmore.png');
}
#descriptioncontainer {
border-style:solid;
border-color:whitesmoke;
padding:5px;
min-height:100px;
}
我在正确的轨道上，从这里到哪里去？ 任何帮助将不胜感激
答案 0 :(得分：1)
您可以像这样为图像分配一个ID：
<img id="myImage" src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />
，然后在javasript中，您可以通过其ID获取元素，并为它分配一个click事件，如下所示：
document.getElementById("myImage").onclick = function() {
//your code here
}
编辑：
对于您来说，您还可以执行以下操作：将<button>标签中的所有<img>标签替换为图片的来源，并调用javascript函数通过将其发送到参数直接在img标签属性中。
例如：
在html中，对所有个人资料执行此操作：
<img src="Images/JimRaynor.png" onclick="changeDescription('Write the description of Jim HERE')"/>
并且在javascript中，您可以编写一个函数来接收参数中的字符串并更改页面中的描述：
function changeDescription(description) {
document.getElementById('description').innerHTML = description;
}
答案 1 :(得分：1)
@Math感谢您的帮助，您的解决方案运行完美。但是我一直在玩它，并想到了：
HTML5
<main>
<div id="container">
<article>
<section id="personnel">
<h2>Personnel</h2>
<p>Find out more about the staff that you will be meeting at the event</p>
<img src="Images/ArcturusMensk.png" id="arcturus" class="profile" />
<img src="Images/JainaProudmore.png" id="jaina" class="profile"/>
<img src="Images/JimRaynor.png" id="jim" class="profile"/>
<img src="Images/SarahKerrigan.png" id="sarah" class="profile"/>
<p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
</section>
</article>
</div>
</main>
JS
(function () {
var profiles = document.getElementsByClassName('profile');
var counter;
var description;
for (counter = 0; counter < profiles.length; counter++) {
profiles[counter].onclick = function () {
description = this.id;
switch (description) {
case 'jim':
document.getElementById('description').innerHTML = "text";
break;
case 'arcturus':
document.getElementById('description').innerHTML = "text";
break;
case 'sarah':
document.getElementById('description').innerHTML = "text";
break;
default:
document.getElementById('description').innerHTML = "text.";
break;
};
};
}
})();
答案 2 :(得分：0)
首先，我认为您在使用type标签时应该使用button属性。其次，我认为您可以使用<a>标记代替按钮并在其上调用函数，并带有一个携带肖像名称的参数，以便您可以将该参数用作函数中的条件并更改描述文字。请按照以下步骤操作：
以下是HTML：
<main>
<div id="container">
<article>
<section id="personnel">
<h2>Personnel</h2>
<p>Find out more about the staff that you will be meeting at the event</p>
<a href="javascript:void(0)" onclick="changeDescription(jim)" id="jim" class="profile"></a>
<a href="javascript:void(0)" onclick="changeDescription(arcturus)" id="arcturus" class="profile"></a>
<a href="javascript:void(0)" onclick="changeDescription(sarah)" id="sarah" class="profile"></a>
<a href="javascript:void(0)" onclick="changeDescription(jaina)" id="jaina" class="profile"></a>
<div id="descriptioncontainer">
<p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
</div>
</section>
</article>
</div>
</main>
以下是功能：
function changeDescription(name) {
var descriptionTag = document.getElementById('description');
if(name == 'jim') {
descriptionTag.innerText = 'This is jim';
}
else if(name == 'arcturus') {
descriptionTag.innerText = 'This is arcturus';
}
}
等等。我希望你明白我的意思。