在一个页面上的多个滑块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