在一個頁面上的多個滑塊jssor

Question

你好我有一個頁面中的多個滑塊的問題。 這裏是我的代碼：

<div id="slider0" class="slider-left" style="width:700px;"> 
       <!-- Loading Screen --> 
       <div u="slides" class="slides2" style="width:700px;"> 
        <div data-id="0"> 
         <img u="image" src='<?php echo get_template_directory_uri(); ?>/images/pixel.gif' class="img-wrap" data-original="<?php echo get_template_directory_uri(); ?>/images/1.jpg" /> 
        </div> 
        <div> 
         <article class="description"> 
          <div class="row animate titles"> 
           <div class="col-md-3 leftBar"> 
            <h3 class="title">Opis</h3> 
            <p class="year">2014</p> 


           </div> 

          </div> 
          <div class="row animate"> 
           <div class="col-md-9 leftBar"> 
            <div class="box"> 
             <h4>Lokalizacja: asda</h4> 
            </div> 
            <div class="box"> 
             <h4>Powieszchnia zabudowy: <span class="small">400 m2</span></h4> 
            </div> 
            <div class="box"> 
             <h4>Powieszchnia użytkowa: <span class="small">400 m2</span></h4> 
            </div> 
            <div class="box"> 
             <h4>Ilość kondygnacji: Podziemna: 0 // Nadziemna: 1</h4> 
            </div> 
            <div class="box"> 
             <h4>Wizualizacje: Nubo</h4> 
            </div> 
           </div> 

          </div> 

          </article> 
        </div> 
        <div data-id="2"> 
         <img u="image" src='<?php echo get_template_directory_uri(); ?>/images/pixel.gif' class="img-wrap" data-original="<?php echo get_template_directory_uri(); ?>/images/a2.jpg" /> 
        </div> 
        <div data-id="3"> 
         <img u="image" src='<?php echo get_template_directory_uri(); ?>/images/pixel.gif' class="img-wrap" data-original="<?php echo get_template_directory_uri(); ?>/images/a2.jpg" /> 
        </div> 
       </div> 


       <span u="arrowleft" class="jssora13l" style="top: 123px; left: 0px;"> 
       </span> 
       <!-- Arrow Right --> 
       <span u="arrowright" class="jssora13r" style="top: 123px; right: 5px;"> 
       </span> 
      </div> 

      <div id="slider1" class="slider slider-left" style="width:700px;"> 
       <!-- Loading Screen --> 
       <div u="slides" class="slides2" style="width:700px;"> 
        <div data-id="0"> 
         <img u="image" src='<?php echo get_template_directory_uri(); ?>/images/pixel.gif' class="img-wrap"data-original="<?php echo get_template_directory_uri(); ?>/images/a5.jpg" /> 
        </div> 
        <div data-id="1"> 
         <article class="description"> 
          <div class="row animate titles"> 
           <div class="col-md-3 leftBar"> 
            <h3 class="title">Opis</h3> 
            <p class="year">2014</p> 


           </div> 

          </div> 
          <div class="row animate"> 
           <div class="col-md-9 leftBar"> 
            <div class="box"> 
             <h4>Lokalizacja: asda</h4> 
            </div> 
            <div class="box"> 
             <h4>Powieszchnia zabudowy: <span class="small">400 m2</span></h4> 
            </div> 
            <div class="box"> 
             <h4>Powieszchnia użytkowa: <span class="small">400 m2</span></h4> 
            </div> 
            <div class="box"> 
             <h4>Ilość kondygnacji: Podziemna: 0 // Nadziemna: 1</h4> 
            </div> 
            <div class="box"> 
             <h4>Wizualizacje: Nubo</h4> 
            </div> 
           </div> 

          </div> 

          </article> 
        </div> 
        <div data-id="2"> 
         <img u="image" class="img-wrap" src='<?php echo get_template_directory_uri(); ?>/images/pixel.gif' data-original="<?php echo get_template_directory_uri(); ?>/images/a2.jpg" /> 
        </div> 
        <div data-id="3"> 
         <img u="image" class="img-wrap" src='<?php echo get_template_directory_uri(); ?>/images/pixel.gif' data-original="<?php echo get_template_directory_uri(); ?>/images/a3.jpg" /> 
        </div> 
       </div> 


       <span u="arrowleft" class="jssora13l" style="top: 123px; left: 0px;"> 
       </span> 
       <!-- Arrow Right --> 
       <span u="arrowright" class="jssora13r" style="top: 123px; right: 5px;"> 
       </span> 
      </div> 

每個滑塊有自己的ID我創建這個滑塊這樣的實例：

$('.slider-left').each(function(i){ 
       jssor_slider_left[i] = new $JssorSlider$("slider"+i, options1); 
      }); 

我的問題是如何讓每個滑塊活動幻燈片的data-id？我試過：

for(j = 0; j < jssor_slider_left.length; j++){ 
       jssor_slider_left[j].$On($JssorSlider$.$EVT_PARK, function SlideParkEventHandler(slideIndex, fromIndex){ 
        var actual = $('.slides2').find("[data-id='"+slideIndex+"']").find('img'); 

       }); 
      } 

但它不起作用。請幫我解決這個問題。

Answer 1

我想這個問題可能是與行

var actual = $('.slides2').find("[data-id='"+slideIndex+"']").find('img'); 

你想滑塊的單個實例活動圖像，對不對？但是$('.slides2')返回類別爲slides2的所有元素（在示例標記中有兩個，每個滑塊實例一個）。您只需要一個元素，即可獲取當前滑塊。

var actual = $('#slider' + j).find('.slides2').find('[data-id="' + slideIndex + '"]').find('img'); 

，你甚至可以加入CSS選擇器，使代碼更短，更有效

var actual = $('#slider' + j + ' .slides2 [data-id="' + slideIndex + '"] img'); 

PS。

據我所知波蘭語言，它的「powierzchnia」，而不是「powieszchnia」：d