如何为图片画廊的每张图片设置不同背景色？

你之前给.gallery-image加.bk类没生效，是因为这些.bk元素属于缩略图容器，和弹窗（.popup）的背景完全无关——弹窗的背景由自身的background属性控制，得从修改弹窗的背景样式入手。

下面是两种可行的实现方案：

方案一：用数组存储对应背景色（简单直接） #

1. 修改JavaScript代码 #

在JS里定义对应6张图片的背景色数组，切换图片时同步更新弹窗背景：

const images = [...document.querySelectorAll('.image')];

// 按顺序定义img1到img6对应的弹窗背景色，可自行修改
const bgColors = ['#ff7a2d', '#ff6b9d', '#4ecdc4', '#95e1d3', '#f38181', '#aa96da'];

// popup相关元素
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const imageName = document.querySelector('.image-name');
const largeImage = document.querySelector('.large-image');
const imageIndex = document.querySelector('.index');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');

let index = 0; // 当前图片索引

images.forEach((item, i) => {
    item.addEventListener('click', () => {
        updateImage(i);
        popup.classList.toggle('active');
    })
})

const updateImage = (i) => {
    let path = `img/img${i+1}.png`;
    largeImage.src = path;
    imageName.innerHTML = path;
    imageIndex.innerHTML = `0${i+1}`;
    index = i;
    // 核心：切换弹窗背景色
    popup.style.background = bgColors[i];
}

closeBtn.addEventListener('click', () => {
    popup.classList.toggle('active');
})

leftArrow.addEventListener('click', () => {
    if(index > 0){
        updateImage(index - 1);
    }
})

rightArrow.addEventListener('click', () => {
    if(index < images.length - 1){
        updateImage(index + 1);
    }
})

// 初始化弹窗背景为第一张图的颜色
popup.style.background = bgColors[0];

const setPopupImage = index => {
  popup.classList.toggle('active');
}
setPopupImage(0);

2. 清理无用代码 #

删掉HTML里所有的<div class="bk"></div>即可。

方案二：用HTML数据属性存储背景色（更灵活） #

如果想直接在HTML里给每张图绑定背景色，无需修改JS数组，可使用data-*属性：

1. 修改HTML代码 #

给每个.image标签加上data-bg属性，填入对应背景色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Popup</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="popup">
        <div class="top-bar">
            <p class="image-name">img1.png</p>
            <span class="close-btn">
                <img src="Graphics/gallery_icon.svg" width="50px" class="close">
            </span>
        </div>
    
        <button class="arrow-btn left-arrow"><img src="img/arrow.png" alt=""></button>
        <button class="arrow-btn right-arrow"><img src="img/arrow.png" alt=""></button>
    
        <img src="img/img1.png" class="large-image" alt="">
    
        <h1 class="index">01</h1>
    </div>
    
    <div class="gallery">
        <div class="gallery-image">
            <img src="img/img1.png" alt="" class="image" data-bg="#ff7a2d">
        </div>
        <div class="gallery-image">
            <img src="img/img2.png" alt="" class="image" data-bg="#ff6b9d">
        </div>
        <div class="gallery-image">
            <img src="img/img3.png" alt="" class="image" data-bg="#4ecdc4">
        </div>
        <div class="gallery-image">
            <img src="img/img4.png" alt="" class="image" data-bg="#95e1d3">
        </div>
        <div class="gallery-image">
            <img src="img/img5.png" alt="" class="image" data-bg="#f38181">
        </div>
        <div class="gallery-image">
            <img src="img/img6.png" alt="" class="image" data-bg="#aa96da">
        </div>
    </div>

    <script src="index.js"></script>
</body>
</html>

2. 修改JavaScript代码 #

在updateImage函数里读取对应图片的data-bg属性，设置弹窗背景：

const images = [...document.querySelectorAll('.image')];

// popup相关元素
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const imageName = document.querySelector('.image-name');
const largeImage = document.querySelector('.large-image');
const imageIndex = document.querySelector('.index');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');

let index = 0; // 当前图片索引

images.forEach((item, i) => {
    item.addEventListener('click', () => {
        updateImage(i);
        popup.classList.toggle('active');
    })
})

const updateImage = (i) => {
    let path = `img/img${i+1}.png`;
    largeImage.src = path;
    imageName.innerHTML = path;
    imageIndex.innerHTML = `0${i+1}`;
    index = i;
    // 核心：从data属性读取背景色
    popup.style.background = images[i].dataset.bg;
}

closeBtn.addEventListener('click', () => {
    popup.classList.toggle('active');
})

leftArrow.addEventListener('click', () => {
    if(index > 0){
        updateImage(index - 1);
    }
})

rightArrow.addEventListener('click', () => {
    if(index < images.length - 1){
        updateImage(index + 1);
    }
})

// 初始化弹窗背景为第一张图的颜色
popup.style.background = images[0].dataset.bg;

const setPopupImage = index => {
  popup.classList.toggle('active');
}
setPopupImage(0);

两种方案都能实现点击缩略图或箭头切换图片时，弹窗背景色同步变化的效果。方案一更适合颜色固定的场景，方案二更适合后期需要灵活修改单张图背景的情况。

内容的提问来源于stack exchange，提问作者Megan