当点击相同的类名时，如何显示正确的内容？

<div id="container1" class="content-container">
  <h2>内容1</h2>
  <p>这是内容1的描述。</p>
</div>

<div id="container2" class="content-container">
  <h2>内容2</h2>
  <p>这是内容2的描述。</p>
</div>

<div id="container3" class="content-container">
  <h2>内容3</h2>
  <p>这是内容3的描述。</p>
</div>

.content-container {
  display: none;
}

var containers = document.getElementsByClassName('content-container');
var classNames = document.getElementsByClassName('class-name');

for (var i = 0; i < classNames.length; i++) {
  classNames[i].addEventListener('click', function() {
    var className = this.getAttribute('data-class');
    for (var j = 0; j < containers.length; j++) {
      containers[j].style.display = 'none';
    }
    document.getElementById(className).style.display = 'block';
  });
}