基本上我想要完成的是创建一个图像列表（比方说 10 个），然后单击这些图像中的任何一个，它们的边框会更改为特定颜色；目前通过 JS 的简单 onClick 事件来完成此操作。那不是问题。当点击第二个、第三个或第四个图像时，就会出现麻烦；当然，所有单击的图像都保持突出显示状态。我想对其进行设置，以便仅在集合中选择的最后一个（当前）图像保留边框颜色已更改的内容。
实现这个简单效果的最佳方法是什么？
下面是一个简单的工作示例：
<!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”。该代码也是为了示例
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
