当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript动态高亮图片实现方法

JavaScript动态高亮图片实现方法

2025-10-27 11:24:33 0浏览收藏

本文介绍了一种使用JavaScript实现动态切换高亮图片的简洁高效方案，适用于3x3图片阵列。通过点击按钮，能够根据其位置动态高亮显示对应的图片，无需复杂的if-else判断。文章详细讲解了如何利用`data-*`属性或直接传递参数，结合简单的数学公式计算图片索引，并修改样式实现高亮效果。核心思路是重置所有图片背景色后，再高亮选中的图片，避免状态管理。此外，文章还提供了HTML结构、CSS样式和JavaScript代码示例，并对比了两种实现方式，以及注意事项，帮助读者快速理解和应用此方法，提升网页交互体验，优化用户操作流程。对于需要类似图片高亮功能的开发者，本文提供了一个实用且易于理解的解决方案。

JavaScript实现3x3图片显示：根据按钮位置动态切换高亮图片

本文旨在提供一种简洁高效的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样式，用于布局和高亮显示：

.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代码修改如下：

<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";
}