javascript - 如何初始化滑块脚本的多个实例 - 基于 div 的类属性为每个 div 设置一个滑块

Question

我对javascript很陌生。我在初始化滑块脚本的多个实例时遇到问题。我希望为每个具有“horizo​​ntalSlider”类的 div 初始化 1 个滑块，方法是为脚本提供 div 的 id，以便每个实例都是唯一的。

这是我到目前为止所拥有的，但它不起作用。

$(document).ready(function(){
                $('.horizontalSlider').each(function(){
                    var thisSlider = '"#' + $(this).attr("id") + ' ul"';
                    $(thisSlider).bxSlider({
                        mode : 'horizontal',
                        speed : 500,
                        prevImage : 'prev.svg',
                        nextImage : 'next.svg',
                        easing : 'swing'
                    });
                });
            });

Answer 1

      $(document).ready(function(){
            $('.horizontalSlider').each(function(){

                $(this).bxSlider({
                    mode : 'horizontal',
                    speed : 500,
                    prevImage : 'prev.svg',
                    nextImage : 'next.svg',
                    easing : 'swing'
                });
            });
        });

Answer 2

你可以这样做：

            $(document).ready(function(){
                $('.horizontalSlider').each(function($element){
                    $element.bxSlider({
                        mode : 'horizontal',
                        speed : 500,
                        prevImage : 'prev.svg',
                        nextImage : 'next.svg',
                        easing : 'swing'
                    });
                });
            });

Answer 3

我认为在这种情况下，没有必要每个

它可以简化为以下内容：

$(document).ready(function(){
            $('.horizontalSlider').bxSlider({
                mode : 'horizontal',
                speed : 500,
                prevImage : 'prev.svg',
                nextImage : 'next.svg',
                easing : 'swing'
            });
        });