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>'))

  });
});

实际上，你的错误是试图选择一个html元素，其选择器匹配postPic的值，而不是将postPic的值赋给img元素的src。

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>");

});
});

Answer 5

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

      let postPic = $('#imgLink').val()
      $('<li>' + '<img src=$("postPic")>' + '</li>')
      $('#imageList').append($("<img/>"),{
          src: function() {
            return postPic
          },
          class: function() {
            return imageClasses
          }
      })

    });
  });

jQuery追加img src URL

5 个答案: