Javascript 动态变化<；部门>；使用无限卷轴和砖石在分页过程中显示新照片集的id

我正在使用Infinitescroll设置分页。我想给每一张新的照片都有一个唯一的id，以便我的模型。现在，我可以设置类（静态）

itemSelector:'.每个照片容器'

我遇到的问题是，当我尝试将div ID添加到当前照片的ID（遍历每张照片）时，javascript会将新照片的ID设置为第一组照片的ID

$newElems.attr('id', '<%=photo[:id]%>');

$newElems.attr（'id'，''）；

如何在infinitescroll和Mashise加载的每个新照片中动态添加带有值photo[：ID]的ID？

index.html.erb（我知道javascript必须移动到自己的文件中）

让我们看看：
$（函数（）{
var$container=$（“#照片#u container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:'。每个照片容器'，
});
});
$container.infinites卷({
导航选择器：“分区#页面_导航”，
下一个选择器：“分区#第#页导航a”，
itemSelector:“.每个图片容器”
},
//触发infinitescroll回调并将id添加到div
函数（新元素）{
var$newElems=$（newElements）.css（{opacity:0}）；
$newElems.imagesLoaded（函数（）{
$newElems.animate（{opacity:1}）；
$newElems.attr（'id'，''）；//未附加正确的id-继续附加第一个元素id
$container.mashise（'added'，$newElems，true）；
});
}
);
});
jQuery（函数（）{
$（'#'）。单击（函数（e）{
//获取照片信息的ajax调用
var fetch_id=“”；
var fetch_secret=''；
$.ajax({
键入：“GET”，
url:“/photos/fetch_info”，
数据类型：“json”，
数据：{'id'：fetch\u id，'secret'：fetch\u secret}，
成功：功能（数据）{
//编辑基本模式的innerHTML
$（'.basic_modal'）.html(
//删除无关代码以提高可读性
);
//负荷模式
$（'.basic_model'）。model({
套圈：对
});
}//结束成功：函数（结果）
});
返回false；
});
});
“照片”，：action=>“index”，：page=>@page.to_i+1，：search=>params[：search]}%>

能够修复此问题。查看Infinitescroll文档，您可以使用它来引用当前元素

$newElems.attr（'id'，this.id）修复问题并分配正确的ID

<div class="body_container">

  <div id="index_header">
     <h1>Let's look at <%=params[:search]%>:</h1>
   </div>

   <div id="photos_container">
     <% @photos_array.each do |photo| %>

         <div class='each_photo_container' id='<%=photo[:id]%>' >
           <%= link_to '#' do %>
             <%= image_tag photo[:s_url] %>
           <% end %>
         </div>

      <!-- Masonry/Pinterest Layout + InfiniteScroll/Pagination -->
      <script type="text/javascript">
       $(function () {

         var $container = $('#photos_container');

         $container.imagesLoaded(function(){
           $container.masonry({
            itemSelector : '.each_photo_container',
           });
         });


         $container.infinitescroll({
           navSelector  : 'div.#page_navigation',            
           nextSelector : 'div.#page_navigation a',    
           itemSelector : '.each_photo_container'          

         },
         //trigger masonry on infinitescroll callback and add id to div
           function(newElements){

             var $newElems = $(newElements).css({ opacity: 0 });

             $newElems.imagesLoaded(function(){

               $newElems.animate({ opacity: 1 });
               $newElems.attr('id', '<%=photo[:id]%>'); //not appending correct ID - keeps appending first element ID

               $container.masonry('appended', $newElems,true);

             });
           }

         );

       });
      </script> 

  <!-- Load Modal onClick -->
  <script type="text/javascript">
  jQuery(function() {
    $('#<%=photo[:id]%>').click(function (e) {

      //ajax call to fetch photo info

      var fetch_id = '<%=photo[:id]%>';
      var fetch_secret = '<%=photo[:secret]%>';  

      $.ajax({
        type: 'GET',
        url: '/photos/fetch_info',
        dataType: 'json',
        data: { 'id' : fetch_id, 'secret' : fetch_secret },
        success: function(data){

          //edit innerHTML of basic_modal
          $('.basic_modal').html(
             //irrelevant code removed for readability
           );

          //load modal
          $('.basic_modal').modal({
            overlayClose:true
          });

        } //end success: function(result)
      });


      return false;
    });
  });
  </script>

  <% end %>

  <div class="basic_modal">
  </div>

  </div><!--End photos_container-->

  <div id="page_navigation">
  <%= link_to "Next", {:controller => "photos", :action => "index", :page => @page.to_i+1, :search => params[:search]}%>
  </div>
</div>