如何在 JavaScript 中访问不断变化的实例变量（由于循环）

Question

我正在尝试使用 AJAX 将图像附加到 div 容器。我的照片有一个 URL 字段，所以我尝试创建一个实例变量，然后将其放入 div 标签中，例如 <div id="individual-photo" data-url="<%= @photo_url %>">.

这没有用，因为它为该实例变量分配了一个值，当我在我的 .js 中调用它时 var url = $("#individual-photo").data("url");，它为我以后的所有照片提供了相同的图像。

我在另一个 Whosebug 中找到了该解决方案，我认为如果我不使用通过循环生成的 div，它会起作用。所以我的问题是，看看我是如何使用循环的.. 我如何将此信息传送到我的 .js 文件？

这是我的代码 index.html.erb

<div id="sidescrolling-container">
      <% if @page > 1 %>
        <%= link_to "PREV", (next_path(@link - 2) + "/#individual-photo") %>
      <% end %>

      <% @pics.each do |photo| %>
        <% @pic_id = photo.id%>
        <% @photo_url = Photo.where(id: @pic_id)[0].url %>
        <div id="individual-photo" data-url="<%= @photo_url %>">

          <img src="<%= photo.url %>" height='250px' width="250px">
          <span id="photo-title"><%= photo.title %></span>
        </div>
      <% end %>

      <% if @page < @page_max %>
        <%= link_to "NEXT", (next_path(@link) + "/#individual-photo"), id: "next_button" %>
      <% end %>

    </div>

和我的 .js

var images = $.get("photos/" + page, function(data){
      var info = $("#individual-photo", data).each(function(){
          var title = $("#photo-title", this).text();

          var url = $("#individual-photo").data("url");

          $("#sidescrolling-container").append(
              '<div id="individual-photo"><img src="'+url+'" height="250px" width="250px"><span id="photo-title">'+title+'</span></div>'
            )
      })
    })

如果有更好的方法来解决这个问题，我很想知道更多！请不要 gem 解决方案，我不想在我的这部分代码中使用 gems。

Answer 1

$("#individual-photo") 引用您 complete 中的每张照片 DOM，$("#individual-photo").data() 始终引用 的数据属性此选择中的第一个 个元素。因此，你总是得到第一个 url.

应该是

var images = $.get("photos/" + page, function(data){
    $("#individual-photo", data).each(function(){
        var title = $("#photo-title", this).text();

        var url = $(this).data("url");

        $("#sidescrolling-container").append(
            '<div id="individual-photo"><img src="'+url+'" height="250px" width="250px"><span id="photo-title">'+title+'</span></div>'
        )
    })
})

如何在 JavaScript 中访问不断变化的实例变量（由于循环）

How to access changing instance variables (due to a loop) in JavaScript

javascript

ajax

jquery

ruby-on-rails

instance-variables