Question

我目前正在使用“SwipeJS”插件（https://github.com/bradbirdsall/Swipe）来创建照片滑块。

以下是div的代码。我在一个页面上有这个div的MULTIPLE实例（下面只使用2个div。

        <div id='slider1' class='swipe'>
          <div class='swipe-wrap'>
            <div class="swipe_index"><img src="/images/default/business.jpg" alt="/images/default/business.jpg" id="img1_1" width="100" height ="100" / >   </div>
            <div class="swipe_index"><img src="/images/default/News.jpg" alt="/images/default/News.jpg" id="img1_2" width="100" height ="100" / >  </div>
            <div class="swipe_index"><img src="/images/default/Gaming.jpg" alt="/images/default/Gaming.jpg" id="img1_3" width="100" height ="100" / > </div>
          </div>
        </div>
        <span class="nav prev">Prev</span>
        <span class="nav next">Next</span>  
        <span class="nav now">now</span>    

        <div id='slider2' class='swipe'>
          <div class='swipe-wrap'>
            <div class="swipe_index"><img src="/images/default/business.jpg" alt="/images/default/business.jpg" id="img1_1" width="100" height ="100" / >   </div>
            <div class="swipe_index"><img src="/images/default/News.jpg" alt="/images/default/News.jpg" id="img1_2" width="100" height ="100" / >  </div>
            <div class="swipe_index"><img src="/images/default/Gaming.jpg" alt="/images/default/Gaming.jpg" id="img1_3" width="100" height ="100" / > </div>
          </div>
        </div>
        <span class="nav prev">Prev</span>
        <span class="nav next">Next</span>  
        <span class="nav now">now</span>

我不知道如何将以下jquery代码绑定到div的每个实例。以下是我尝试修改jquery

            <script>
            $(document).ready(function() {
                $('.swipe').each(function(){
                    Slider = $(this).Swipe({
                        continuous: false,
                        stopPropagation: true,
                        callback: function(index, elem) {
                            alert(index);
                        },
                    }).data('Swipe');

                    $('.next').click(function(data){ 
                        Slider.next();
                        //alert($(".swipe_index .current").data('index'));

                    });

                    $('.prev').on('click', Slider.prev);
                });
            });

            </script>

但是，上面的代码效果不好。这只会将jquery绑定到最后一个div。有人请帮助纠正上面的代码吗？

什么是将jquery绑定到网页上多个div实例的最佳方法。

Answer 1

尝试

$(document).ready(function () {
    $('.swipe').each(function () {
        //create a closure variable instead of a global one
        var Slider = $(this).Swipe({
            continuous: false,
            stopPropagation: true,
            callback: function (index, elem) {
                alert(index);
            },
        }).data('Swipe');

        //use relative tranversal to find the next/prev elements
        $(this).next().next('.next').click(function (data) {
            Slider.next();
            //alert($(".swipe_index .current").data('index'));

        });

        //try using $.proxy
        $(this).next('.prev').on('click', $.proxy(Slider.prev, Slider));
    });
});

将jQuery绑定到div的多个实例

1 个答案: