使用 JS 在 Rails 视图中预览图像

Question

我有一个 text_field，它是图像的 url，我想将它加载到 img 标记中。我还想在 image_url 文本框失去焦点时更新图像，以便他们可以更改 url 并查看预览。

这是视图的相关 erb：

 <div class="control-group">
    <%= f.label :image, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :image_url, :class => 'text_field', id: "image_url" %>
    </div>
  </div>

  Preview: <img id="preview" src="">

还有嵌入的js...

<script type="text/javascript">

document.observe('dom:loaded', function() {
  $('preview').src = $('image_url').text
  $('image_url').bind("focusout",function(){
    $('preview').src = this.text
    )}

});

加载时我什么也得不到，src 也没有改变

Answer 1

您需要指定要查找的对象的选择器。我也会使用准备好的文档。

$(document).ready(function() {
  $('#preview').src = $('#image_url').text();
  $('#image_url').bind("focusout",function(){
    $('#preview').src = this.text();
  });
});