设计包含可由最终用户选择的数十个图像的页面。尝试使用事件（onclick，onmouseover和onmouseout）使其图形化愉悦。由于每个事件都会更改几个div标签，因此我决定使用Javascript而不是CSS。
为了防止onmouseout影响点击的图片边框，我分配了一个变量＆＃39; imgClicked＆＃39;。问题是点击的每张图片都有相同的变量变化。有没有办法为每个框分配变量，以便每个图像知道它是否被点击。或者也许是一条更好的路线？
提前致谢！
var borderColorOver = "#26d314";
var borderColorOff = "#7DAFE7";
var borderColorOn = "#d40101";
var imgClicked = 0;
function heartMouseClick(a) {
var heartImg = a;
if (imgClicked < 1) {
var images = document.getElementsByClassName('images');
images[heartImg].style.borderColor = borderColorOn;
var subject = document.getElementsByClassName('subject');
subject[heartImg].style.borderColor = borderColorOn;
imgClicked = 1;
} else {
var images = document.getElementsByClassName('images');
images[heartImg].style.borderColor = borderColorOff;
var subject = document.getElementsByClassName('subject');
subject[heartImg].style.borderColor = borderColorOff;
imgClicked = 0;
}
}
function heartMouseOver(a) {
var heartImg = a;
if (imgClicked < 1) {
var images = document.getElementsByClassName('images');
images[heartImg].style.borderColor = borderColorOver;
var subject = document.getElementsByClassName('subject');
subject[heartImg].style.borderColor = borderColorOver;
}
}
function heartMouseOut(a) {
var heartImg = a;
if (imgClicked < 1) {
var images = document.getElementsByClassName('images');
images[heartImg].style.borderColor = borderColorOff;
var subject = document.getElementsByClassName('subject');
subject[heartImg].style.borderColor = borderColorOff;
}
}.pictureBox {
width: 300px;
height: 300px;
border-style: solid;
border-width: 0px;
}
.images {
width: 300px;
height: 200px;
}
.subject {
width: 300px;
height: 100px;
border: 5px solid #FFBE00;
}<body>
<div class="pictureBox">
<div class="picture">
<img onmouseover="heartMouseOver(0)" onmouseout="heartMouseOut(0)" onclick="heartMouseClick(0)" class="images" border="5" src="photo-1.jpg">
</div>
<div class="subject" border="5">
Image 0 Description
</div>
</div>
<div class="pictureBox">
<div>
<img onmouseover="heartMouseOver(1)" onmouseout="heartMouseOut(1)" onclick="heartMouseClick(1)" class="images" border="5" src="photo-2.jpg">
</div>
<div class="subject" border="5">
Image 1 Description
</div>
</div>
<div class="pictureBox">
<div>
<img onmouseover="heartMouseOver(2)" onmouseout="heartMouseOut(2)" onclick="heartMouseClick(2)" class="images" border="5" src="photo-3.jpg">
</div>
<div class="subject" border="5">
Image 2 Description
</div>
</div>
</body>
答案 0 :(得分：1)
我已经修改了一些代码。我将id添加到dom元素中，并将id传递给所有方法，而不是硬编码。以下是新代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.pictureBox {
width: 300px;
height: 300px;
border-style: solid;
border-width: 0px;
}
.images {
width: 300px;
height: 200px;
}
.subject {
width: 300px;
height: 100px;
border: 5px solid #FFBE00;
}
</style>
</head>
<script>
var borderColorOver = "#26d314";
var borderColorOff = "#7DAFE7";
var borderColorOn = "#d40101";
var imgClicked = 0;
function heartMouseClick(a) {
if (imgClicked < 1) {
var images = document.getElementById(a);
images.style.borderColor = borderColorOn;
var subject = document.getElementById('s'+a);
subject.style.borderColor = borderColorOn;
imgClicked = 1;
} else {
var images = document.getElementById(a);
images.style.borderColor = borderColorOff;
var subject = document.getElementById('s'+a);
subject.style.borderColor = borderColorOff;
imgClicked = 0;
}
}
function heartMouseOver(a) {
if (imgClicked < 1) {
var images = document.getElementById(a);
images.style.borderColor = borderColorOver;
var subject = document.getElementById('s'+a);
subject.style.borderColor = borderColorOver;
}
}
function heartMouseOut(a) {
if (imgClicked < 1) {
var images = document.getElementById(a);
images.style.borderColor = borderColorOff;
var subject = document.getElementById('s'+a);
subject.style.borderColor = borderColorOff;
}
}
</script>
<body>
<div class="pictureBox">
<div class="picture">
<img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="0" onclick = "heartMouseClick(this.id)" class="images" border="5" src="1.jpg">
</div>
<div class="subject" id="s0" border ="5">
Image 0 Description
</div>
</div>
<div class="pictureBox">
<div>
<img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="1" onclick = "heartMouseClick(this.id)" class="images" border="5" src="emergency.jpg">
</div>
<div class="subject" id="s1" border ="5">
Image 1 Description
</div>
</div>
<div class="pictureBox">
<div>
<img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="2" onclick = "heartMouseClick(this.id)" class="images" border="5" src="lebron.jpg">
</div>
<div class="subject" id="s2" border ="5">
Image 2 Description
</div>
</div>
</body>
</html>
你走在正确的轨道上，我只是添加了id并传递了这些内容。
答案 1 :(得分：1)
您可以为每个img元素分配唯一ID（ID），然后可以使用数组功能来处理每个图像。或试试这个：
<img id="image1101" src="image1.jpg" onclick="myFunction(this.id)" />
这将激活名为myFunction（）的函数，并以“id”作为参数。
然后你可以在你的javascript中使用它：
<script type="text/javascript">
function myFunction(image_id){
// use your funcitons here such as
// document.getElementById(image_id).style;
//
}
</script>
答案 2 :(得分：0)
您可以为图像对象指定一个新属性，因为您已经拥有了它们的数组。例如：
images[heartImg].imgClicked = true;
修改内置对象可能有点冒险，但是如果你选择一个足够独特的属性名称而没有其他脚本可能尝试使用相同的名称，它应该足够安全。
如果您无法将自己的属性添加到图像对象中，则可以选择将imgClicked属性存储在相关DOM元素的自定义数据属性中。