Реализовать ползунок jQuery на неопределенной временной шкале

Question

Чего я хочу достичь, это искать временную шкалу с разными слотами данных years-li в коллекции эпох decades - ul. У меня есть данные в следующем формате:

<ul class='decade'> 
    <p>1810</p> 
    <li>1811</li> 
    <li>1813</li> 
    <li>1819</li> 
</ul> 
<ul class='decade'> 
    <p>1820</p> 
    <li>1822</li> 
    <li>1824</li> 
    <li>1828</li> 
    <li>1829</li> 
</ul> 
<ul class='decade'> 
    <p>1830</p> 
    <li>1834</li> 
    <li>1835</li> 
    <li>1836</li> 
    <li>1837</li> 
    <li>1838</li> 
</ul> 
<ul class='decade'> 
    <p>1840</p> 
    <li>1844</li> 
    <li>1849</li> 
</ul> 

Теперь каждый раз, когда я выделив уважаемое десятилетие, но я хочу, чтобы обработчик не искать в соответствующем чтобы не. лет в течение десятилетия. например, если кто-то выбирает 1813, тогда он будет выбран, а 1810 будет выделен. В то же время пользователь может перемещаться только на 3 этапа в этом десятилетии, поскольку он содержит всего 3 года. то же самое должно работать в эпоху 1830 года с 5 шагами, поскольку у нее 5 лет.

Может ли кто-нибудь помочь в этом, пожалуйста?

я пытался до сих пор: я не в состоянии вычислить шаг он динамичен в случаях вызова десятилетия.

$('.timelineYearNavList').slider({ 
      min:1, 
      max:years.length, 
      step:1, 
      slide: function(event, ui) { 
       //triggering other events 
      } 
    }); 

Пожалуйста, не предполагайте, что я написал только этот много кода и ничего не пробовал. :)

Answer 1

Вот отрывок, который я придумал:

$(document).ready(function() { 
 
    $("ul.decade").each(function() { 
 
    $(this).hide(); 
 

 
    var valMap = $(this).find("li").map(function() { 
 
     return $(this).text(); 
 
    }).get(); //converts li contents into array 
 

 
    $(this).after('<p>Decade (' + 
 
     $(this).find('p').text() + 
 
     '): <input type="text" class="selected" readonly style="border:0; color:#f6931f; font-weight:bold;" value="' + 
 
     valMap[0] + 
 
     '"></p><div class="slider"></div>'); //adds a slider set to each decades 
 

 
    $(this).nextAll(".slider") 
 
     .data("valMap", valMap).slider({ 
 
     max: valMap.length - 1, 
 
     min: 0, 
 
     values: [0], 
 
     slide: function(event, ui) { 
 
      $(this).prev().find(".selected") 
 
      .val(valMap[ui.values[0]]); //sets the value according to years selected 
 
     } 
 
     }).each(function() { 
 
     var opt = $(this).data("ui-slider").options; 
 
     var max = opt.max + 1; 
 

 
     for (var i = 0; i < max; i++) { 
 
      var el = $('<label>' + 
 
       $(this).data("valMap")[i] + 
 
       '</label>') 
 
      .css('left', (i/(max - 1) * 100) + '%'); 
 
      $(this).append(el); 
 
     } 
 
     }); //adds legends to the slider 
 
    }); 
 
});

.slider label { 
 
    position: absolute; 
 
    width: 20px; 
 
    margin-left: -1.1em; 
 
    text-align: center; 
 
    margin-top: 20px; 
 
} 
 

 
.slider { 
 
    width: 80%; 
 
    margin: 0 auto 2em auto; 
 
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<ul class='decade'> 
 
    <p>1810</p> 
 
    <li>1811</li> 
 
    <li>1813</li> 
 
    <li>1819</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1820</p> 
 
    <li>1822</li> 
 
    <li>1824</li> 
 
    <li>1828</li> 
 
    <li>1829</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1830</p> 
 
    <li>1834</li> 
 
    <li>1835</li> 
 
    <li>1836</li> 
 
    <li>1837</li> 
 
    <li>1838</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1840</p> 
 
    <li>1844</li> 
 
    <li>1849</li> 
 
</ul>

А вот альтернативный слайдер сниппет:

$(document).ready(function() { 
 
    var decades = [], 
 
    years = []; 
 
    $("ul.decade").each(function() { 
 
    var valMap = {}; 
 
    valMap.years = $(this).find("li").map(function() { 
 
     return $(this).text(); 
 
    }).get(); //converts li contents into array 
 
    valMap.decade = $(this).find('p').text(); 
 
    decades.push(valMap); 
 
    years = $.merge(years, valMap.years); 
 
    }).hide(); 
 

 
    $('body').append('<p>Decade (<span class="decade">' + 
 
    decades[0].decade + 
 
    '</span>): <input type="text" class="selected" readonly style="border:0; color:#f6931f; font-weight:bold;" value="' + 
 
    years[0] + 
 
    '"></p><div class="slider"></div>'); //appends a slider set to document 
 

 
    $(".slider") 
 
    .slider({ 
 
     max: years.length - 1, 
 
     min: 0, 
 
     values: [0], 
 
     slide: function(event, ui) { 
 
     var total = 0, 
 
      decade; 
 
     for (var i of decades) { 
 
      total += i.years.length; 
 
      if (ui.values[0] < total) { 
 
      decade = i.decade; 
 
      break; 
 
      } 
 
     } 
 
     $(".decade") 
 
      .text(decade); //sets the value according to decade selected*/ 
 
     $(".selected") 
 
      .val(years[ui.values[0]]); //sets the value according to years selected*/ 
 
     } 
 
    }).each(function() { 
 
     var opt = $(this).data("ui-slider").options; 
 
     var max = opt.max + 1; 
 

 
     for (var i = 0; i < max; i++) { 
 
     var el = $('<label>' + 
 
      years[i] + 
 
      '</label>') 
 
      .css('left', (i/(max - 1) * 100) + '%'); 
 
     $(this).append(el); 
 
     } 
 
    }); //adds legends to the slider 
 
});

.slider label { 
 
    position: absolute; 
 
    width: 20px; 
 
    margin-left: -1.1em; 
 
    text-align: center; 
 
    margin-top: 20px; 
 
    font-size: 0.75em; 
 
} 
 

 
.slider { 
 
    width: 90%; 
 
    margin: 0 auto 2em auto; 
 
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<ul class='decade'> 
 
    <p>1810</p> 
 
    <li>1811</li> 
 
    <li>1813</li> 
 
    <li>1819</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1820</p> 
 
    <li>1822</li> 
 
    <li>1824</li> 
 
    <li>1828</li> 
 
    <li>1829</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1830</p> 
 
    <li>1834</li> 
 
    <li>1835</li> 
 
    <li>1836</li> 
 
    <li>1837</li> 
 
    <li>1838</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1840</p> 
 
    <li>1844</li> 
 
    <li>1849</li> 
 
</ul>

Заключительный фрагмент:

$(document).ready(function() { 
 
    var decades = [], 
 
    years = []; 
 
    $("ul.decade").each(function() { 
 
    var valMap = {}; 
 
    valMap.years = $(this).find("li").map(function() { 
 
     return $(this).text(); 
 
    }).get(); //converts li contents into array 
 
    valMap.decade = $(this).find('p').text(); 
 
    decades.push(valMap); 
 
    years = $.merge(years, valMap.years); 
 
    }).hide(); 
 

 
    $('body').append('<p>Decade (<span class="decade">' + 
 
    decades[0].decade + 
 
    '</span>): <input type="text" class="selected" readonly style="border:0; color:#f6931f; font-weight:bold;" value="' + 
 
    years[0] + 
 
    '"></p><div class="slider"></div>'); //appends a slider set to document 
 
    $(".slider") 
 
    .slider({ 
 
     max: parseInt(years[years.length - 1]), 
 
     min: parseInt(decades[0].decade), 
 
     values: [years[0]], 
 
     slide: function(event, ui) { 
 
     if ($.inArray(ui.values[0].toString(), years) < 0) return false; 
 
     var decade; 
 
     for (var i of decades) { 
 
      if ($.inArray(ui.values[0].toString(), i.years) >= 0) { 
 
      decade = i.decade; 
 
      break; 
 
      } 
 
     } 
 
     $(".decade") 
 
      .text(decade); //sets the value according to decade selected*/ 
 
     $(".selected") 
 
      .val(ui.values[0]); //sets the value according to years selected 
 
     } 
 
    }).each(function() { 
 
     var opt = $(this).data("ui-slider").options; 
 
     var max = opt.max; 
 
     var min = opt.min; 
 

 
     for (var i = min; i < max; i += 10) { 
 
     var el = $('<label>' + i + '</label>') 
 
      .css('left', ((i - min)/(max - min) * 100) + '%'); 
 
     $(this).append(el); 
 
     } 
 
    }); //adds legends to the slider 
 
});

.slider label { 
 
    position: absolute; 
 
    width: 20px; 
 
    margin-left: -1.1em; 
 
    text-align: center; 
 
    margin-top: 20px; 
 
    font-size: 0.75em; 
 
} 
 

 
.slider { 
 
    width: 90%; 
 
    margin: 0 auto 2em auto; 
 
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<ul class='decade'> 
 
    <p>1810</p> 
 
    <li>1811</li> 
 
    <li>1813</li> 
 
    <li>1819</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1820</p> 
 
    <li>1822</li> 
 
    <li>1824</li> 
 
    <li>1828</li> 
 
    <li>1829</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1830</p> 
 
    <li>1834</li> 
 
    <li>1835</li> 
 
    <li>1836</li> 
 
    <li>1837</li> 
 
    <li>1838</li> 
 
</ul> 
 
<ul class='decade'> 
 
    <p>1840</p> 
 
    <li>1844</li> 
 
    <li>1849</li> 
 
</ul>