Question

一旦将URL填充到输入框中，我试图使用jQuery将图像加载到div中。

到目前为止，我已设法在输入div填充后设置警告显示..

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

现在我想替换此警报，而是将图像显示在从URL中拉出的div中。

任何人都指向一个示例的方向或者我需要看到的jquery函数的一些阅读来实现它？

更新

继Newt的更新后，我现在有了这个..

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

知道我哪里出错了吗？

Answer 1

如果你知道图片的网址，那么只需添加一个css属性＆＃34; background-url＆＃34;你的div，例如：

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

您的浏览器应该能够加载图像并将其作为背景图像。

Answer 2

这应该可以解决问题：

$('.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/

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

2 个答案: