0

我有一组照片，我正在遍历并显示在我的索引页面上。当我单击每张图片时，应该会弹出一个模式并显示更大版本的图像。我正在尝试使用 jQuery 来更改模态的 innerHTML。

问题是当我尝试传递照片变量时，我得到一个undefined local variable or method 'photo'. 索引页面根本不加载。

照片.js

jQuery(function () {
  $('.photo_container').click(function (e) {
    $('#basic_modal').html("<p><%= image_tag modal_url(photo), :class=>'modal_image' %></p>");
    return false;
  });

  $('.photo_container').click(function (e) {
    $('#basic_modal').modal({
      overlayClose:true
    });
  return false;
  });
});

错误发生在上面的第一个函数中，我尝试在单击 .photo_container 时传递一些 rails 代码。

index.html.erb

<% @photos.each do |photo| %>


  <%= link_to '#', :class => 'basic' do %>
    <div class="photo_container">
      <%= image_tag flickr_url(photo) %>
    </div>
  <% end %>

  <div id="basic_modal">
  </div>

<% end %>

控制器

class PhotosController < ApplicationController

  def index
    if params[:search].empty?
      redirect_to root_path
    else
      @title = params[:search]
      @photos = flickr.photos.search(:tags => params[:search], :has_geo => 1)
    end
  end
end

关于如何传递照片参数的任何线索？

4

1 回答 1

0

您可以将image_tag带有模态 url 的 erb 放在 erb 中。无需动态添加内容。basic_modal您可以使用一些基本的 css 隐藏div。然后你可以摆脱javascript函数的第一部分。

此外，javascript 代码应该在photos.js，而不是在应用程序布局中。

编辑

以下是您的 erb 的外观：

<% @photos.each do |photo| %>

  <%= link_to '#', :class => 'basic' do %>
    <div class="photo_container">
      <%= image_tag flickr_url(photo) %>
    </div>
  <% end %>

  <div class="basic_modal">
    <%= image_tag modal_url(photo), :class=>'modal_image' %>
  </div>

<% end %>
于 2012-09-23T03:54:11.410 回答