JavaScript实现3x3图片显示：根据按钮位置动态切换高亮图片-js教程-PHP中文网

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

霞舞

发布： 2025-09-29 19:59:01

原创

315人浏览过

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样式，用于布局和高亮显示：

立即学习“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";
}

登录后复制

代码解释：

改图鸭AI图片生成

查看详情

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

登录后复制