javascript - 在不确定的时间线上实现 jQuery slider

Question

我想要实现的是在时代集合decades-ul中寻找具有不同数据槽years-li的时间线。我有这种格式的数据:

<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>

这是一个替代 slider 片段:

$(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>