javascript 如何用js从元素中提取url< img>?

qzlgjiam  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(146)

我需要从img元素中提取数据(src)。我尝试将URL数据写入元素,并在OnClick()函数中写入input. image,但它没有返回任何内容。如果有人知道如何解决这个问题,我将不胜感激。
先谢了

$('#btn').click(function ()
{
    var input = {};
    input.n = parseInt($('#quantity').val());
    input.prompt = $('#txt').val();
    input.size = $('#sel').find(":selected").val();
    $.ajax({
        url: '/Home/GenerateImage',
        method: 'post',
        contentType: 'application/json',
        data: JSON.stringify(input)            

    }).done(function (data) {
        $.each(data.data, function () {

            var btnID = 'VarBtn_' + i;
            $('#display').append(                    
                '<div class="col-md-3 p-10" style="padding-top:10px">' +
                '<div class="dropdown">' +
                '<button class="btnV" id="idOne">Dropdown</button>' +
                '<div id="myDropdown" class="dropdown-content">' +                    
                '<br>Select size' +
                '<select id="Vsel">' +
                '<option selected>256x256</option>' +
                '<option>512x512</option>' +
                '<option>1024x1024</option>' +
                '</select>' +
                '<br>Enter quantity' +
                '<input type="number" id="Vquantity" value="1" min="1" max="10" />' +
                '<br>' +
                '<button id="' + btnID + '" >Generate</button>' + 
                '<div hidden id="ImgUrl">"' + this.url + '"</div>' +
                '</div>' +
                '</div>' +
                '<img class="p-10" id="GenImg" src = "' + this.url + '">' +
                '</div>');
        });
    });
});

$(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()); 

input.image = dropdown.find('#ImgUrl').val(); //return nothing

//code
});
njthzxwz

njthzxwz1#

您可以使用数据集。
示例:

$('#btn').click(function ()
{
    var input = {};
    input.n = parseInt($('#quantity').val());
    input.prompt = $('#txt').val();
    input.size = $('#sel').find(":selected").val();
    $.ajax({
        url: '/Home/GenerateImage',
        method: 'post',
        contentType: 'application/json',
        data: JSON.stringify(input)            

    }).done(function (data) {
        $.each(data.data, function () {

            var btnID = 'VarBtn_' + i;
            $('#display').append(                    
                '<div class="col-md-3 p-10" style="padding-top:10px">' +
                '<div class="dropdown">' +
                '<button class="btnV" data-imgUrl=' + this.url + '" id="idOne">Dropdown</button>' +
                '<div id="myDropdown" class="dropdown-content">' +                    
                '<br>Select size' +
                '<select id="Vsel">' +
                '<option selected>256x256</option>' +
                '<option>512x512</option>' +
                '<option>1024x1024</option>' +
                '</select>' +
                '<br>Enter quantity' +
                '<input type="number" id="Vquantity" value="1" min="1" max="10" />' +
                '<br>' +
                '<button id="' + btnID + '" >Generate</button>' + 
                '</div>' +
                '</div>' +
                '</div>');
        });
    });
});

$(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()); 

input.image = $(this).data("imgUrl");

//code

所以我建议使用document.createElemet()和parent.appendChild来代替字符串追加。
它很容易阅读和理解。

相关问题