Elessar Slider的多個副本在同一頁面上

Question

因此，我正在將Elessar滑塊（位於https://github.com/quarterto/Elessar ）添加到正在工作的網站上。 但是，我想使用多個實例。 問題是，如果我嘗試添加滑塊div的副本，或者添加兩個以上，則只有最后一個可以起作用（其他行為就像空容器一樣）。 我已經在堆棧交換中篩選了類似的問題，到目前為止，這個問題

jQuery滑塊：只有最后一個滑塊在具有多個滑塊的頁面上工作

是最接近我的問題。 我試圖通過解決問題

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中。 感謝您的幫助！

Answer 1

添加不同的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>

小提琴

Answer 2

需要說明的是：演示中的role屬性並不重要，我只是將其用作選擇器。 復制div時，您將得到兩個具有相同role元素，而jQuery會同時選擇這兩個元素。 您可以改用類。

Elessar Slider的多個副本在同一頁面上

問題描述

2 個解決方案

解決方案1
1 已采納 2014-12-08 09:01:55

解決方案2
0 2015-08-24 11:26:45

Elessar Slider的多個副本在同一頁面上

問題描述

2 個解決方案

解決方案1 1 已采納 2014-12-08 09:01:55

解決方案2 0 2015-08-24 11:26:45

解決方案1
1 已采納 2014-12-08 09:01:55

解決方案2
0 2015-08-24 11:26:45