基于jQuery的服饰选择器：无法从下拉菜单值中获取JSON数据属性的问题求助

我帮你排查了代码里的问题，核心是你没有跟踪当前选中的服饰类型，而且访问JSON数据的路径完全不对，导致拿不到对应的producturl和image值。下面给你详细说明问题和修复方案：

问题分析 #

1. 缺失当前服饰类型的上下文：当你切换颜色下拉菜单时，只拿到了颜色的value（比如black），但不知道这个颜色属于哪类服饰（是裤子、衬衫还是卫衣），自然没法定位到JSON里对应的颜色对象。
2. JSON数据访问路径错误：你写的jsonDATA[currentColor.value.producturl]逻辑完全不对——currentColor是字符串类型的颜色值（比如"black"），根本没有.value属性，更别说.value.producturl了。正确的路径应该是jsonDATA[当前服饰类型].colors[当前颜色值]。

修复步骤 #

1. 保存当前选中的服饰类型 #

在服饰下拉菜单的change事件里，把选中的服饰类型（比如pants）保存到一个全局变量，或者存在DOM元素的data属性里，方便颜色下拉事件读取。

2. 修正颜色下拉事件的逻辑 #

在颜色下拉的change事件里：

• 先判断是否选中了有效颜色（不是默认的none）
• 用保存的服饰类型 + 当前颜色值，从JSON中取出对应的颜色对象
• 用这个对象里的producturl和image属性来更新链接和图片

修复后的完整代码 #

JavaScript部分 #

$(document).ready(function() {
    // 新增全局变量保存当前选中的服饰类型
    let currentClothing = '';

    $('.js-clothing-selector').change(function() {
        currentClothing = $(this).val();
        console.log('Selected clothing: ', currentClothing);
        
        $('.js-colors-selector').html('<option value="none">Select Colour</option>');
        
        // 只在选中有效服饰时才填充颜色下拉
        if (currentClothing !== 'none') {
            $.each(jsonDATA[currentClothing].colors, function(key, value) {
                console.log('Color option: ', key, value);
                $('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>');
            });
        }
    });

    $('.js-colors-selector').change(function() {
        const currentColor = $(this).val();
        
        // 忽略默认的"Select Colour"选项
        if (currentColor === 'none' || currentClothing === 'none') {
            // 重置链接和图片
            $('.js-color-link').attr('href', '');
            $('.js-color-image').attr('src', '');
            return;
        }

        // 正确获取对应的颜色对象
        const colorData = jsonDATA[currentClothing].colors[currentColor];
        console.log('Selected color data: ', colorData);

        // 更新链接和图片
        $('.js-color-link').attr('href', colorData.producturl);
        $('.js-color-image').attr('src', colorData.image);
    });
});

var jsonDATA = {
    "pants": {
        "colors": {
            "black": {
                "value": "black",
                "image": "https://i.imgur.com/HMcE1OH.jpeg",
                "name": "Black",
                "producturl": "https://google.ca"
            },
            "white": {
                "value": "white",
                "image": "https://i.imgur.com/MVvuxDA.jpeg",
                "name": "White",
                "producturl": "https://gmail.ca"
            },
            "red": {
                "value": "red",
                "image": "https://i.imgur.com/MVvuxDA.jpeg",
                "name": "Red",
                "producturl": "https://yahoo.ca"
            }
        }
    },
    "shirt": {
        "colors": {
            "grey": {
                "value": "grey",
                "image": "https://i.imgur.com/HMcE1OH.jpeg",
                "name": "Grey",
                "producturl": "https://google.ca"
            },
            "blue": {
                "value": "blue",
                "image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e",
                "name": "Blue",
                "producturl": "https://gmail.ca"
            }
        }
    },
    "hoodie": {
        "colors": {
            "gold": {
                "value": "gold",
                "image": "https://i.imgur.com/HMcE1OH.jpeg",
                "name": "Gold",
                "producturl": "https://gmail.com"
            },
            "yellow": {
                "value": "yellow",
                "image": "https://i.imgur.com/8bPtWIw.jpeg",
                "name": "Yellow",
                "producturl": "https://gmail.ca"
            },
            "blue": {
                "value": "blue",
                "image": "https://i.imgur.com/MVvuxDA.jpeg",
                "name": "Blue",
                "producturl": "https://gmail.net"
            }
        }
    }
}

HTML部分（无需修改，保持原代码即可） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="flex">
        <div class="w-1/2">
            <div class="flex">
                <div class="w-24">
                    <select name="clothing" id="clothing" class="js-clothing-selector">
                        <option selected value="none">Select Clothing Type</option>
                        <option value="hoodie">Hoodie</option>
                        <option value="pants">Pants</option>
                        <option value="shirt">Shirt</option>
                    </select>
                </div>
                <div class="w-24">
                    <select name="colors" id="colors" class="js-colors-selector">
                        <option selected value="none">Select Colour</option>
                    </select>
                </div>
            </div>
            <div class="js-link-container">
                <a href="" class="dib ar-link js-color-link">Buy Item</a>
            </div>
        </div>
        <div class="w-1/2 js-image-container">
            <img class="db w-100 js-color-image" src="" alt="" />
        </div>
    </div>
</div>

额外优化点 #

• 增加了对默认选项（value="none"）的判断，避免用户未选服饰或颜色时出现报错
• 新增了重置链接和图片的逻辑，当用户切换回默认选项时，清空链接和图片

内容的提问来源于stack exchange，提问作者Saaif Al-Asad