On-Click img border = #color - 多个图像 - 一次只需要突出显示1个 [英] On-Click img border = #color - Multiple images - Only need 1 highlighted at a time
问题描述
基本上我想要完成的是创建一个图像列表（比方说10），点击这些图像后，它们的边框会变成特定的颜色;目前使用JS进行简单的onClick事件即可实现此目的。那不是问题。单击第二个或第三个或第四个图像时会出现问题;当然，所有点击的图像都会保持高亮显示。我想设置它，以便只有在集合中选择的最后一个（当前）图像保持边框颜色改变。
Basically what I am trying to accomplish is create a list of images (let's say 10) and upon clicking any of these images, their border changes to a specific color; currently accomplishing this with a simple onClick event with JS. That's not an issue. The trouble comes in when clicking a second or third or forth image; all of the images clicked remain highlighted, of course. I would like to set it so that only the last (current) image selected in the set remain with the border color changed.
实现这个简单的最佳方法是什么效果？
What is the best way to accomplish this simple effect?
推荐答案
下面是一个简单的工作示例：
Below is a simple working example:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<style type="text/css">
.normal {
border:none;
}
.highlighted {
border:1px solid #336699;
}
</style>
<script type="text/javascript">
var ImageSelector = function() {
var imgs = null;
var selImg = null;
return {
addImages: function(container) {
imgs = container.getElementsByTagName("img");
for(var i = 0, len = imgs.length; i < len; i++) {
var img = imgs[i];
img.className = "normal";
img.onclick = function() {
if(selImg) {
selImg.className = "normal";
}
this.className = "highlighted";
selImg = this;
};
}
}
};
}();
</script>
</head>
<body>
<div>
<div id="menu">
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
</div>
</div>
<script type="text/javascript">
var div = document.getElementById("menu");
ImageSelector.addImages(div);
</script>
</body>
</html>
这不使用任何库，例如jQuery。它只是简单的'ol js。此外，代码是为了示例
This does not use any library such as jQuery. Its just plain 'ol js. Also the code is for the sake of example
这篇关于On-Click img border = #color - 多个图像 - 一次只需要突出显示1个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
