解决jQuery图片切换失效：CSS active类可见性问题详解

<main>
    <div class="productCustomiseContainer">
        <!-- 左侧列/图片显示区域 -->
        <div class="leftColumn">
            <!-- 所有产品图片，通过data-image属性与颜色关联 -->
            <img data-image="black" src="images/blackProduct1.png" alt="黑色产品">
            <img data-image="white" src="images/whiteProduct2.png" alt="白色产品">
            <img data-image="green" src="images/greenProduct1.png" alt="绿色产品">
            <!-- 初始显示图片应带有active类 -->
            <img data-image="pink" class="active" src="images/pinkProduct1.png" alt="粉色产品">
        </div>

        <!-- 右侧列/产品配置与颜色选择 -->
        <div class="rightColumn">
            <div class="productDescription">
                <!-- 产品描述 -->
            </div>
            <div class="productConfig">
                <!-- 产品颜色选择区域 -->
                <div class="productColour">
                    <span>Select Colour</span>
                    <div class="colourChoose">
                        <!-- 颜色选择器，input的data-image属性与图片关联 -->
                        <div>
                            <input data-image="pink" type="radio" id="pink" name="color" value="pink" checked>
                            <label for="pink"><span></span></label>
                        </div>
                        <div>
                            <input data-image="green" type="radio" id="green" name="color" value="green">
                            <label for="green"><span></span></label>
                        </div>
                        <!-- 其他颜色选项 -->
                    </div>
                </div>
            </div>
            <div class="productPrice">
                <!-- 产品价格 -->
            </div>
            <!-- 引入jQuery库和自定义JavaScript文件 -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
            <script src="product.js" charset="utf-8"></script>
        </div>
    </div>
</main>

/* 左侧图片列样式 */
.leftColumn {
    width: 65%;
    position: relative; /* 确保子图片可以绝对定位 */
}

.leftColumn img {
    width: 100%;
    position: absolute; /* 使图片堆叠在一起 */
    left: 0;
    top: 0;
    opacity: 0; /* 默认所有图片隐藏 */
    transition: all 0.3s ease; /* 添加过渡效果，使切换更平滑 */
}

/* 核心修复：只有带有active类的图片才显示 */
.leftColumn img.active {
    opacity: 1; /* 激活状态的图片完全可见 */
}

/* ... 其他CSS样式 ... */

/* 颜色选择器样式，用于隐藏原生radio按钮并美化label */
.colourChoose input[type="radio"] {
    display: none;
}

.colourChoose input[type="radio"] + label span {
    /* 自定义颜色选择圆圈的样式 */
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
    vertical-align: middle;
    cursor: pointer;
    margin: -1px 4px 0 0;
}

/* 根据input的id为label span设置背景色 */
.colourChoose input[type="radio"]#pink + label span { background-color: pink; }
.colourChoose input[type="radio"]#green + label span { background-color: green; }
/* ... 其他颜色 ... */

/* 选中状态的颜色选择器样式 */
.colourChoose input[type="radio"]:checked + label span {
    background-image: url(images/check-solid.svg); /* 选中时显示对勾图标 */
    background-repeat: no-repeat;
    background-position: center;
}

.leftColumn img.active {
    opacity: 1;
}

$(document).ready(function() {
    // 监听.colourChoose div内所有radio input的点击事件
    $('.colourChoose input').on('click', function() {
        // 获取当前点击的radio input的data-image属性值，即选中的颜色
        var productColour = $(this).attr('data-image');

        // 1. 移除当前所有图片上的'active'类
        $('.leftColumn img').removeClass('active'); 
        // 注意：原代码为$('.active').removeClass('active'); 
        // 这样写会移除所有带有active类的元素，包括radio input自身。
        // 为了更精确地控制图片，建议明确指定目标元素为图片。

        // 2. 根据选中的颜色，找到对应的图片并添加'active'类
        $('.leftColumn img[data-image=' + productColour + ']').addClass('active');

        // 3. (可选) 为当前点击的radio input添加'active'类。
        //    由于radio input本身是隐藏的，这个操作通常用于其对应的label或其他可见元素。
        //    如果不需要对radio input本身进行额外标记，此行可省略。
        //    $(this).addClass('active'); 
    });
});