本文旨在提供一种简洁高效的JavaScript方案，实现通过点击按钮，在3x3的图片阵列中，根据按钮的位置动态高亮显示对应的图片。文章将详细讲解如何使用data-*属性或直接传递参数的方式，配合简单的数学公式，避免冗余的if-else判断，实现图片的动态切换和高亮显示。
实现原理
核心思路是利用按钮的索引值，通过简单的数学公式计算出对应图片在图片数组中的索引，然后修改该图片的样式，实现高亮显示。为了避免状态管理，每次点击按钮时，先将所有图片的背景色重置，然后再高亮当前选中的图片。
代码实现
首先，我们需要HTML结构来展示图片和按钮：
<div class="image-wrapper"> <div class="image">1</div> <div class="image">2</div> <div class="image">3</div> <div class="image">4</div> <div class="image">5</div> <div class="image">6</div> <div class="image">7</div> <div class="image">8</div> <div class="image">9</div> </div> <button data-index="1" onclick="onClick(event)">1</button> <button data-index="2" onclick="onClick(event)">2</button> <button data-index="3" onclick="onClick(event)">3</button>
然后，添加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代码，用于处理按钮点击事件和图片高亮：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
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代码修改如下：
<button onclick="onClick(1)">1</button> <button onclick="onClick(2)">2</button> <button onclick="onClick(3)">3</button>
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 是基于3x3的图片阵列的特点推导出来的，如果图片数量或排列方式发生变化，需要相应调整公式。
- 如果需要更复杂的交互效果，可以考虑使用更高级的JavaScript框架或库。
总结
本文提供了一种简洁高效的JavaScript方案，实现了根据按钮位置动态切换高亮图片的效果。通过使用data-*属性或直接传递参数的方式，配合简单的数学公式，避免了冗余的if-else判断，使代码更加简洁易懂。同时，也介绍了另一种实现方式，并提供了注意事项，帮助读者更好地理解和应用该方案。
