如何通过JavaScript/jQuery提取<img>元素的src属性值？

核心问题分析 #

1. 重复ID导致选择器失效：你循环生成的所有下拉框、输入框、隐藏div都用了同一个ID（比如#ImgUrl、#Vsel），jQuery通过ID查找元素时只会匹配页面中第一个符合的元素，根本取不到当前点击项对应的数据。
2. 错误使用.val()获取div内容：div不是表单控件，.val()方法只针对input、select这类表单元素，应该用.text()获取div的文本内容；而且你给div内容加了多余的引号，就算拿到也会带引号，无法直接使用。

修正后的代码 #

1. 生成HTML部分（替换原$.each内的代码）

$.each(data.data, function(i) { // 将i作为each参数传入，避免变量污染
    var btnID = 'VarBtn_' + i;
    $('#display').append(                    
        '<div class=\"col-md-3 p-10\" style=\"padding-top:10px\">' +
        '<div class=\"dropdown\">' +
        '<button class=\"btnV\">Dropdown</button>' + // 移除重复的静态ID
        '<div class=\"dropdown-content\">' + // 移除重复的静态ID
        '<br>Select size' +
        '<select class=\"vsel\">' + // 把ID改为类名
        '<option selected>256x256</option>' +
        '<option>512x512</option>' +
        '<option>1024x1024</option>' +
        '</select>' +
        '<br>Enter quantity' +
        '<input type=\"number\" class=\"vquantity\" value=\"1\" min=\"1\" max=\"10\" />' + // 把ID改为类名
        '<br>' +
        '<button id=\"' + btnID + '\" >Generate</button>' + 
        '<div hidden class=\"img-url\">' + this.url + '</div>' + // 把ID改为类名，移除多余引号
        '</div>' +
        '</div>' +
        '<img class=\"p-10 gen-img\" src=\"' + this.url + '\">' + // 把ID改为类名
        '</div>'
    );
});

2. 点击事件部分（替换原点击事件代码）

$(document.body).on('click', '[id^=VarBtn]', function () {
    var dropdown = $(this).closest('.dropdown-content');
    var input = {};
    input.size = dropdown.find('.vsel').val(); // 用类选择器查找元素
    input.n = parseInt(dropdown.find('.vquantity').val()); 

    // 方案1：从隐藏div获取URL（已修正）
    input.image = dropdown.find('.img-url').text().trim(); // 用.text()获取文本并去除空格

    // 方案2：直接从同级图片元素提取src（更简洁，无需隐藏div）
    // var imgElement = dropdown.closest('.col-md-3').find('.gen-img');
    // input.image = imgElement.attr('src');

    // 后续业务代码...
});

额外优化点 #

• 移除了所有重复的静态ID，彻底避免ID冲突问题。
• 新增方案2，直接从图片元素提取src，省去冗余的隐藏div，代码更简洁。

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