Question

作为元素周期表中8年级化学项目的一部分，我正在尝试编写一个脚本，该脚本将为图像提供直接URL :(如下所示： http://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=H&chl=http://goo.gl/dpZRKS < / strong>）来自HTML输入字段，并将其作为图像输出到下面的div中 - 而不是直接URL。这将允许学生使用QR码创建一个元素正方形的“增强现实”元素周期表，他们可以在墙上打印和张贴，这将为其他学生提供有关他们研究的元素的更多信息。

我已经为文本（元素名称，原子序数和原子量）实现了这个目标，但是我无法弄清楚如何为图像做这个。

您可以在此处查看我的进度：http://jsfiddle.net/X85ra/

这是我到目前为止所提出的：

<!DOCTYPE html> <html> <head> <style> h1,h3{ float:left; margin-right:20px; } td{ vertical-align:middle; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> <script> $(document).ready(function () { $('.name').keyup(function () { // We create a variable called "finalname", that is equal to the text the user enters: var finalname = $(this).val(); $('.title').text(finalname); }); $('.name2').keyup(function () { // We create a variable called "finalname", that is equal to the text the user enters: var finalname = $(this).val(); $('.title2').text(finalname); }); $('.name3').keyup(function () { // We create a variable called "finalname", that is equal to the text the user enters: var finalname = $(this).val(); $('.title3').text(finalname); }); }); </script> </head> <body> <form action=""> Atomic Number: <input class="name" name="" type="text"><br/> Atomic Weight: <input class="name2" name="" type="text"><br/> Element:<input class="name3" name="" type="text"><br/> QR direct URL:<input class="name4" name="" type="text"> </form> <div> <table> <tr> <td><h3>Atomic Number:</h3><h1 class="title"></h1></td> </tr> <tr> <td><h3>Atomic Weight:</h3><h1 class="title2"></h1></td> </tr> <tr> <td><h3>Element:</h3><h1 class="title3"></h1></td> </tr> <tr> <td><h3>QR direct URL:</h3><p class="title3"></p></td> </tr> </table> </div> </body> </html>

Answer 1

附加图片元素并将其src设置为您的图片：

$('.name4').keyup(function() {
    var imgUrl = this.value; // no need to overuse jQuery here
    $('.title4').append($('<img>').attr('src', imgUrl));
});

此外，您似乎有一个拼写错误：代码中有两个title3

Answer 2

将image src设置为.name4，如下所示：

$('.name4').keyup(function () {

    // We create a variable called "finalname", that is equal to the text the user enters:
    var finalname = $(this).val();
    $('.title3').attr('src', finalname);

});

查看更新的fiddle

jQuery：将直接图像URL从输入字段复制到div

2 个答案: