本文旨在提供一种简洁高效的JavaScript方案，实现通过点击按钮，在3×3的图片阵列中，根据按钮的位置动态高亮显示对应的图片。文章将详细讲解如何使用data-*属性或直接传递参数的方式，配合简单的数学公式，避免冗余的if-else判断，实现图片的动态切换和高亮显示。
实现原理
核心思路是利用按钮的索引值，通过简单的数学公式计算出对应图片在图片数组中的索引，然后修改该图片的样式，实现高亮显示。为了避免状态管理，每次点击按钮时，先将所有图片的背景色重置，然后再高亮当前选中的图片。
代码实现
首先，我们需要HTML结构来展示图片和按钮：
123456789
然后，添加CSS样式，用于布局和高亮显示：
立即学习“Java免费学习笔记（深入）”；
.image-wrapper { display: flex; flex-wrap: wrap; /* 允许图片换行 */ width: 90px; /* 控制每行显示的图片数量 */ gap: 10px; padding-block: 10px;}.image { border: 1px solid black; text-align: center; width: 20px; height: 20px;}
接下来，是JavaScript代码，用于处理按钮点击事件和图片高亮：
const images = document.querySelectorAll(".image");const onClick = (ev) => { // 重置所有图片的背景色 [...images].forEach(img => img.style.background = "none"); // 获取按钮的索引值 const value = ev.target.dataset.index; // 计算对应图片的索引 const index = (+value) * 3 - 3; // 高亮显示对应的图片 images[index].style.background = "#acc2fa";}
代码解释：
document.querySelectorAll(“.image”)：获取所有class为”image”的元素，存储在images变量中。onClick(ev)：按钮点击事件的处理函数，ev是事件对象。[…images].forEach(img => img.style.background = “none”)：将images转换为数组，并遍历所有图片，将其背景色设置为none，实现重置效果。ev.target.dataset.index：获取触发事件的按钮的data-index属性值，也就是按钮的索引。(+value) * 3 – 3：关键的数学公式，将按钮索引转换为图片索引。(+value)将字符串类型的索引值转换为数字类型。images[index].style.background = “#acc2fa”：将对应索引的图片的背景色设置为#acc2fa，实现高亮效果。
另一种实现方式：直接传递参数
另一种实现方式是直接将按钮的索引值传递给onClick函数，避免使用data-*属性。
HTML代码修改如下：
JavaScript代码修改如下：
const images = document.querySelectorAll(".image");const onClick = (value) => { [...images].forEach(img => img.style.background = "none"); const index = value * 3 - 3; images[index].style.background = "#acc2fa";}
注意事项
确保HTML结构、CSS样式和JavaScript代码正确引入和关联。公式 value * 3 – 3 是基于3×3的图片阵列的特点推导出来的，如果图片数量或排列方式发生变化，需要相应调整公式。如果需要更复杂的交互效果，可以考虑使用更高级的JavaScript框架或库。
总结
本文提供了一种简洁高效的JavaScript方案，实现了根据按钮位置动态切换高亮图片的效果。通过使用data-*属性或直接传递参数的方式，配合简单的数学公式，避免了冗余的if-else判断，使代码更加简洁易懂。同时，也介绍了另一种实现方式，并提供了注意事项，帮助读者更好地理解和应用该方案。
以上就是JavaScript实现3×3图片显示：根据按钮位置动态切换高亮图片的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524630.html
微信扫一扫 
支付宝扫一扫 
