javascript - 网页按钮点击图像更新

Question

我想知道是否可以有一个带有文本字段和按钮的 HTML 表单，其中输入一个字符串(比如 5)，然后按下按钮，图像“image5.jpg”存储在服务器上，呈现在网页上。

我相信这可以归结为编写一个按钮“点击方法”:

1. 读取文本字段并形成图像的文件名字符串

2. 最好更新图像(或者将用户重定向到“http://.../image5.jpg ”也可以)

除了基本的 HTML 之外，我不太熟悉，但如果我知道什么可以完成工作，我可以将它们组合在一起。谢谢。

Answer 1

// DOM ready handler
$(function(){

  // Click on change image button handler
  $('#select').click(function(){

    // Get the value entered in the number input
    var image = $('#number').val();

    // Change the source of the image
    $('#image').attr('src', "http://somewebsite.com/image" + image +".jpg");
  });
});

JSFiddle: https://jsfiddle.net/0rn00L4a/

没有真实的图像可以显示，但是如果你检查 DOM，你会发现它会将图像更改为类似的内容

<img id="image" src="http://somewebsite.com/image2.jpg"> 

因此，如果您输入正确的图像路径，当您按下按钮时，它会立即显示它们。

您可以在输入的 change 事件上执行此操作，但这有点刺耳。