jQuery的 - 从动态URL加载图像到div

我想使用jQuery将图像加载到一个div中，一旦URL已填充到输入框中。jQuery的 - 从动态URL加载图像到div

到目前为止，我已经成功地得到警报显示，一旦输入格已被填充..

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery(".mediafield-url").change(function() { 
     alert("Handler for .change() called."); 
    }); 
}); 
</script>

现在我要替换此警报，而是有图像显示在一个div从拉URL。

任何人指向我的例子或一些阅读jquery函数我需要看着实现它？

UPDATE

由纽特更新继我现在有这个..

function custom_admin_js() { 
    echo '<script type="text/javascript"> 
    jQuery(\'.mediafield-url\').change(function(){ 
    var a = $(this).val(); 
    var new_img = \'<img src=\'+a+\'>\'; 
    jQuery(\'.your-div\').html(new_img); 
}); 
    </script>'; 
} 
add_action('admin_footer', 'custom_admin_js');

这是在WordPress的管理部分触发，虽然它在的jsfiddle工作正常，当运行WP管理部分它给我的错误...

Uncaught TypeError: undefined is not a function post-new.php?post_type=image:716 
(anonymous function) post-new.php?post_type=image:716 

n.event.dispatch load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3 
r.handle load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3 
n.event.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3 
e.event.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:8 
(anonymous function) load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3 
n.extend.each load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:2 
n.fn.n.each load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:2 
n.fn.extend.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3 
send_to_editor post-new.php?post_type=image:754 
(anonymous function) media-upload.php?type=file&tab=library&post_id=93:4

任何想法，我哪里出错了？

来源

2014-08-31 fightstarr20

是'.mediafield-url'输入框？ – Newtt 2014-08-31 20:02:17

这应该解决的问题：

$('.mediafield-url').change(function(){ 
    var a = $(this).val(); 
    var new_img = '<img src='+a+'>'; 
    $('.your-div').html(new_img); 
});

小提琴这里：http://jsfiddle.net/Newtt/v0ycp7a6/2/

来源

2014-08-31 20:17:09 Newtt

感谢您的这一点，工程伟大的小提琴，但不是当实施现场。我已更新原始帖子... – fightstarr20 2014-08-31 20:56:03

添加的代码的哪一行是显示的错误？ – Newtt 2014-08-31 21:45:37

我正在努力研究它究竟在哪里发现问题。我已经从控制台上面添加了全部错误 – fightstarr20 2014-08-31 21:53:12

如果您知道图像的URL，然后只需添加一个CSS属性“背景链接”到你的DIV，比如像这样：

$('yourDiv').css('background-image', 'url(http://yourUrl.de/image.jpg)').

您的浏览器应该能够加载图像和地点它作为背景图像。

来源

2014-08-31 20:04:40 ynnus

这并不能解决问题，因为url是未知的。 – Newtt 2014-08-31 20:14:55

如果用户在输入中插入url，他通过读取输入值知道它。没有写过如何获得投入的价值，因为我猜这应该是已知的。 – ynnus 2014-08-31 20:21:08

好吧，够公平的。但是使用'background-image'将需要OP指定div的高度和宽度，根据可能输入的任何URL的随机尺寸，这是不可能的。为了使它更清晰，这里是您的解决方案：http://jsfiddle.net/Newtt/8w7k4ffk/ – Newtt 2014-08-31 20:24:43

jQuery的 - 从动态URL加载图像到div

回答

相关问题