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