javascript - Elessar Slider的多个副本在同一页面上

因此，我正在向正在工作的网站添加Elessar滑块（位于https://github.com/quarterto/Elessar）。但是，我想使用多个实例。问题是，如果我尝试添加滑块div的副本，或者添加两个以上，则只有最后一个可以起作用（其他行为就像空容器一样）。我已经在堆栈交换中筛选了类似的问题，到目前为止，这个问题

jQuery sliders: only last slider working on page with multiple sliders

是最接近我的问题。我试图通过解决问题

1）为每个div复制并粘贴具有自己唯一变量的函数语句，

2）插入脚本

$( ".slider1" ).clone().appendTo( ".slider1" );

使用现有脚本多次克隆同一div（建议在上面的链接中找到一个分辨率），以及

3）包括脚本

$(document).ready(function()
    {
    $('new').append("<div class='slider1'>"+r+"</div>");
    });

在现有脚本中将滑块属性附加到新的div。

但是这些都没有运气。现有的html是

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Elessar Slider</title>
        <script type="text/javascript" src="../../JS/jquery/jquery.js"></script>

        <script src="../../elessar/dist/elessar.js" type="text/javascript"></script>
        <link rel="stylesheet" href="../../elessar/elessar.css">

        <script src="../../elessar/moment/moment.js"></script>

        <script src="stylesheet" src="../../elesser/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
        <link rel="stylesheet" href="../../elesser/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="../../elesser/bootstrap/dist/css/bootstrap-responsive.css">

        <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1, h2 {
            font-family: Arial, sans-serif;
            font-weight: 100;
        }

        h1 {
            font-size: 60px;
        }

        .elessar-handle {
            opacity: 0.1;
        }

        header .pull-right {
            margin: 10px 0 0 10px;
            padding: 9.5px;
        }

        </style>

    </head>
    <body>

        <!--Div to be copied--!>
        <div style="width: 650px;">
            <div class="slider1" class="container" role="main"></div>
        </div>
        <!----!>

        <script>
            var r = new RangeBar({

                min: moment().startOf('day').format('LLLL'),
                max: moment().endOf('day').format('LLLL'),
                valueFormat: function (ts) {
                    return moment(ts).format('LLLL');
                },
                valueParse: function (date) {
                    return moment(date).valueOf();
                },
                values: [
                [
                  moment().startOf('day').format('LLLL'),
                  moment().startOf('day').add(1, 'hours').format('LLLL')
                ],
                [
                  moment().startOf('day').add(1.5, 'hours').format('LLLL'),
                  moment().startOf('day').add(3.5, 'hours').format('LLLL')
                ],
              ],
                label: function (a) {
                    return moment(a[1]).from(a[0], true);
                },
                snap: 1000 * 60 * 15,
                minSize: 1000 * 60 * 60,
                barClass: 'progress',
                rangeClass: 'bar',
                allowDelete: true,

            });

            $('[role=main]').prepend(r.$el).on('changing', function (ev, ranges) {
                $('pre.changing').html('changing ' + JSON.stringify(ranges, null, 2));
            }).on('change', function (ev, ranges) {
                $('pre.changing').after($('<pre>').html('changed ' + JSON.stringify(ranges, null, 2)));
            });
        </script>
    </body>
</html>

滑块功能的其余部分位于顶部链接的elessar.js中。感谢您的帮助！

最佳答案

添加不同的role属性。

<body>
    <div style="width: 650px;">
        <div class="slider1" class="container" role="main"></div>
    </div>

    <div style="width: 650px;">
        <div class="slider2" class="container" role="main1"></div>
    </div>
</body>

Fiddle