0

無限スクロールを使用してページネーションを設定しています。モーダルの目的で、新しい写真のセットごとに一意の ID を指定したいと考えています。現在、クラス（静的）を設定できます。

itemSelector : '.each_photo_container'

私が抱えている問題は、現在の写真の ID に div ID を追加しようとすると (各写真を反復処理)、javascript が新しい写真の ID を最初のセットの最初の写真の ID に設定し続けることです。

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

値 photo[:id] を持つ ID を、infinitescroll と masonry によって読み込まれる新しい写真ごとに動的に追加するにはどうすればよいですか?

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

Was able to fix this. Looking at Infinitescroll documentation, you can use this to refer to the current element.

$newElems.attr('id', this.id); fixes the problem and assigns the correct ID.

于 2012-09-26T22:24:58.933 に答える