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

因此，我将一个Elessar滑块（在https://github.com/quarterto/Elessar处找到）添加到我正在处理的网站中。但是我想使用它的多个实例。问题是，如果我尝试添加滑块div的副本，或者多于两个，则只有最后一个会起作用（其他操作像空容器）。我已经通过堆叠交换类似的问题，进行筛分，到目前为止，这个问题Elessar Slider在同一页面上的多个副本

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

是最接近我的问题。我试着通过

1）复制到解决我的问题和粘贴功能语句，用自己独特的变量中的每个格，

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中。我很感激任何帮助！

来源

2014-12-08 Andrew

你能提供一个小提琴来玩吗？ – 2014-12-08 04:29:14

所有的代码都在这个小提琴中，包括jquery/bootstrap依赖和moment.js包含在底部： – Andrew 2014-12-08 07:20:36

http://jsfiddle.net/atstearns23/nehhxsb9/11/但是它似乎并没有运行小提琴，但在电脑上运行良好。我确定你是否将它们复制到他们将运行的文本文件中。在[this]（http://jsfiddle.net/Cerlin/nehhxsb9/13/）中的 – Andrew 2014-12-08 07:21:52

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

来源

2014-12-08 09:01:55