javascript - JS/jQuery: 単一の div をクリックすると、クラスが 2 つの div に追加されます

Question

-content画像を含む div をクリックすると、その div とそれに関連する div ( があるもの) の両方にクラスが追加されるようにしようとしています.active(つまり、画像 div をクリックすると、それぞれのコンテンツ ボックスがポップアップ表示されます)。 )

http://jsfiddle.net/sergep/VM6AC/

コードの JavaScript セクションで何が間違っているのかわかりません。

$('.diagram div').click(function(){
  var $this = $(this);
  var type = $this.attr('class');
  $this.siblings('.diagram div').removeClass('active');
  $this.addClass('active');
  $('div.diagram-content .' + type).addClass('active');
});

単純な行を追加するとalert($this.attr('class'));、コードが完全に機能しなくなるのはなぜですか? （またはそうですか？）

html は次のようになります。

<div class="diagram">
  <div id="gameboy" class="gameboy"></div>
  <div class="switch"></div>
  <div class="face"></div>
</div>
<div class="anatomy-content">
  <div class="gameboy-content">This is a content box for the gameboy</div>
  <div class="switch-content">This is a content box for the switch</div>
  <div class="face-content">This is a content box for the face</div>
</div>

classesアプローチではなく、アプローチを取ることにしましたdata-type。