为什么相同的 jQuery 函数适用于一个数据-* 但不适用于另一个？

Question

我根据不同数据属性的值使用

on(click)

函数隐藏和显示 html 部分。它适用于

data-year

但不适用于

data-content-type

我不知道为什么。

$(document).ready(function() {

  var cards = $('section.card');

  $('.year').on('click', function() {

    var year = $(this).text();

    var yearList = $('section').map(function() {
      return $(this).data('year');
    }).get();

    yearList.forEach(function(y) {
      if (y == year) {

        cards.addClass('hidden');

        $("section[data-year='" + year + "']").removeClass('hidden');

      }
    });


  });

  $('.content-type').on('click', function() {

    var content = $(this).text();

    var contentList = $('section').map(function() {
      return $(this).data('content-type');
    }).get();

    contentList.forEach(function(c) {
      if (c == content) {

        cards.addClass('hidden');

        $("section[data-content-type='" + content + "']").removeClass('hidden');

      }

    });


  });
});

.hidden {
    display: none;
}

<div class='container'>
    <aside class="sidebar">
        <ul class="nav">
            <hr>
            <li>
            <div class='year'>2001</div>
            <a class='link-opens-content' href="#project-1">Project Name 1</a>
            <div class='content-type'>Book<div>
            </li>
            <hr>
            <li>
            <div class='year'>2001</div>
            <a class='link-opens-content' href="#project-2">Project Name 2</a>
            <div class='content-type'>Installation<div>
            </li>
            <hr>
            <li>
            <div class='year'>2002</div>
            <a class='link-opens-content' href="#project-3">Project Name 3</a>
            <div class='content-type'>Photography<div>
            </li>
            <hr>
            <li>
            <div class='year'>2003</div>
            <a class='link-opens-content' href="#project-4">Project Name 4</a>
            <div class='content-type'>Book<div>
            </li>
            <hr>
        </ul>
    </aside>
    <main>
    <section class='card hidden' id=project-1 data-year='2001' data-content-type='Book'>
        <h3>
            Project Title 1
        </h3>
        <p>
            Project text 1
        </p>
    </section>

    <section class='card hidden' id=project-2 data-year='2001' data-content-type='Installation'>
        <h3>
            Project Title 2
        </h3>
        <p>
            Project text 2
        </p>

                    
    </section>

    <section class='card hidden' id=project-3 data-year='2002' data-content-type='Photography'>
        <h3>
            Project Title 3
        </h3>
        <p>
            Project text 3
        </p>
                    
    </section>

    <section class='card hidden' id=project-4 data-year='2003' data-content-type='Book'>
        <h3>
            Project Title 4
        </h3>
        <p>
            Project text 4
        </p>

    </section>

    </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

点击导航中的“年份”（2001、2002、2003）会显示具有相应

data-year

的部分，但与“内容类型”（书籍、装置、摄影）相同的功能不起作用。我认为这可能是内容和类型之间的第二次破折号所以尝试了

data-contentType

。还尝试删除

data-year

以查看同一部分上的多个

data-*

是否存在问题，但它没有任何改变。