jQuery append img src URL

Question

我有一个表单，我需要提交img url。提交后，应将其作为图像添加到表单下方的列表中。如何将图像URL值添加到列表中？目前，我有这样的代码，但它简化版，工作：

$(document).ready(function(){ 
    $('#imageListForm').submit(function(event){ 
    event.preventDefault(); 

     let postPic = $('#imgLink').val() 
     $('#imageList').append($('<li>' + '<img src=$("postPic")>' + '</li>')) 

    }); 
    }); 

Answer 1

根据您的示例代码这应该工作...

$(document).ready(function(){ 
    $('#imageListForm').submit(function(event){ 
    event.preventDefault(); 
    $('#imageList').append($('<li>' + '<img src="' + $('#imgLink').val() + '">' + '</li>')) 
    }); 
}); 

Answer 2

你已经得到了你的IMG SRC的值到postPic var，这是一个字符串，所以不需要在jQuery选择器中。这应该为你工作：

$(document).ready(function(){ 
    $('#imageListForm').submit(function(event){ 
    event.preventDefault(); 

    let postPic = $('#imgLink').val() 
    $('#imageList').append($('<li>' + '<img src="' + postPic + '">' + '</li>')) 

    }); 
}); 

实际上，你的错误是试图选择与匹配postPic的价值，而不是postPic的值赋给img元素的src选择的HTML元素。

Answer 3

我试过这个代码，它的工作原理。您只需拨打postPic，以便imageListForm表单中输入的网址值将显示在img源文件中。

$(document).ready(function(){ 
    $('#imageListForm').submit(function(event){ 
    event.preventDefault(); 
     let postPic = $('#imgLink').val(); 
     $('#imageList').append($('<li>' + '<img src="'+postPic+'"' + '</li>')); 
    }); 
    }); 

Answer 4

请看看这个：

$(document).ready(function(){ 
$('#imageListForm').submit(function(event){ 
event.preventDefault(); 

    let postPic = $('#imgLink').val() 
    $('#imageList').append("<li><img src='"+postPic+"'></li>"); 

}); 
});