0

我正在使用 Infinitescroll 来设置分页。出于我的模态目的，我想为每组新照片提供一个唯一的 ID。现在，我可以设置类（静态）。

itemSelector : '.each_photo_container'

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

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

如何为无限滚动和砖石加载的每张新照片动态添加值为 photo[:id] 的 ID？

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

<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>
4

1 回答 1

0

能够解决这个问题。查看 Infinitescroll 文档，您可以使用它来引用当前元素。

$newElems.attr('id', this.id);修复问题并分配正确的 ID。

于 2012-09-26T22:24:58.933 回答