Выделите раздел, используя атрибуты данных

Question

Я пытаюсь прокрутить, используя jQuery onClick, используя атрибуты данных элементов. У меня есть два списка элементов, поэтому я просто пытаюсь найти равное значение данных и прокрутить до этого раздела!

спасибо

<ul>
    <li class="year-nr" data-year="2019">2019</li>
    <li class="year-nr" data-year="2018">2018</li>
    <li class="year-nr" data-year="2017">2017</li>
    <li class="year-nr" data-year="2016">2016</li>
    <li class="year-nr" data-year="2015">2015</li>
</ul>

<section class="year-content" data-year="2019"></section>
<section class="year-content" data-year="2018"></section>
<section class="year-content" data-year="2017"></section>
<section class="year-content" data-year="2016"></section>
<section class="year-content" data-year="2015"></section>


$('.year-nr').on("click", function() {

  var section = $('year-content'),
  yearNr_id = $('.year-nr').data('year'),
  _id = $(this).data('year');

     for (var i = 0; i < section.length; i++) {
         var _i = section[i];
         var section_id = section.data('year');

         if (yearNr_id == _id) {
              $('html, body').animate({
                        scrollTop: $(section[i]).offset().top
             }, 'slow');
         }
   }
});

Ну, в основном ожидаемый результат при нажатии на "li"with data-year =" 2019 "выделите раздел с data-year =" 2019 "и т. д.

Answer 1

Вы можете значительно упростить свой код, напрямую обращаясь к разделу по его атрибуту data-year.

$('.year-nr').on("click", function() {
  var year = $(this).data('year');
  var section = $('.year-content[data-year=' + year + ']');
  $('html, body').animate({
    scrollTop: $(section).offset().top
  }, 'slow');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="year-nr" data-year="2019">2019</li>
  <li class="year-nr" data-year="2018">2018</li>
  <li class="year-nr" data-year="2017">2017</li>
  <li class="year-nr" data-year="2016">2016</li>
  <li class="year-nr" data-year="2015">2015</li>
</ul>

<section class="year-content" data-year="2019"></section>
<div style="height:200px;">data for year 2019</div>
<section class="year-content" data-year="2018"></section>
<div style="height:200px;">data for year 2018</div>
<section class="year-content" data-year="2017"></section>
<div style="height:200px;">data for year 2017</div>
<section class="year-content" data-year="2016"></section>
<div style="height:200px;">data for year 2016</div>
<section class="year-content" data-year="2015"></section>
<div style="height:200px;">data for year 2015</div>