同一页面上的多个Elessar滑块副本

所以我正在向我正在开发的网站添加一个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链接在顶部。我很感激对此的任何帮助！

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

小提琴

澄清一下：演示中的role属性并不重要，我只是将其用作选择器。当你复制div时，你最终会得到两个具有相同role的元素，而jQuery会选择这两个元素。您可以改用类。

相关内容

最新更新

热门标签：