Question

所以我在我正在处理的网站上添加了一个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中。我很感激任何帮助！

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>

Fiddle

Answer 2

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

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

2 个答案: