一页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