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

回答

相關問題