Несколько копий ползунка Elessar на той же странице

Итак, я добавляю слайдер Elessar (находится в https://github.com/quarterto/Elessar) на веб-сайт, над которым я работаю. Однако я хотел использовать несколько экземпляров. Проблема в том, что если я попытаюсь добавить дубликат ползунка div или более двух, будет действовать только последний (другие действуют как пустые контейнеры). Я просеивают через подобные вопросы в обмен стека, и до сих пор вопросНесколько копий ползунка Elessar на той же странице

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, связанных в верхней части. Я благодарен за любую помощь в этом!

источник

2014-12-08 Andrew

Можете ли вы предоставить скрипку для игры? –

Весь код находится в этой скрипке, включая зависимости jquery/bootstrap и moment.js внизу: – Andrew

http://jsfiddle.net/atstearns23/nehhxsb9/11/, однако он, похоже, не запускается в скрипка, но отлично работает на компьютере. Я уверен, что вы скопировали их в текстовые файлы, которые они запускали. – Andrew

Добавить другой 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

Для уточнения: атрибут role в демо не важно, я просто использовать его в качестве селектора. Когда вы копируете div, вы получаете два элемента с одинаковыми role, а jQuery выбирает оба. Вместо этого вы могли бы использовать классы.

источник

2015-08-24 11:26:45

Несколько копий ползунка Elessar на той же странице

ответ

Смежные вопросы