JQuery - 基于具有相同类的数据属性切换元素

Question

单击切换按钮后，JQuery 似乎将我页面上的所有元素隐藏在评论下方。为什么会这样的任何想法？

在我的页面上，我有一堆按钮对应于一个讲师。我有评论，其中包含一位讲师。默认情况下，显示所有评论。单击其中一个按钮时，我只想显示该讲师的评论。当它被点击时，我想再次显示所有评论，或者如果按下另一个讲师按钮，我想显示评论。

教师按钮的 HTML

  <button class="ui basic small button instructor-button" id="Instructor A">

    Instructor A

  </button>

  <button class="ui basic small button instructor-button" id="Instructor B">

    Instructor B

  </button>

用于评论的 HTML

<div class="reviews">

   <div class="review" data-instructor="Instructor A">

    // elements for review

   </div>

      <div class="review" data-instructor="Instructor B">

    // elements for review

   </div>

</div>

这是我尝试过的 JQuery

$('.instructor-button').click(function() {

      var instructor = this.id;

      $('.review[data-instructor!="' + instructor + '"]').toggle()

    });

这有效，但仅当第一条评论是我选择的评论时，否则它会隐藏所有评论。关于如何去做这件事的任何想法？