javascript - CSS クラスに基づく選択的な表示/非表示の難しさ

Question

私はcssクラスに基づいて複数のdivを表示/非表示にするjsスクリプトに取り組んでいますが、一見非常に単純です。この例を見つけようと試みたところ、以下にリンクされている記事に近いものを見つけました。次のリンクのコードを出発点として使用しました。

JavaScript を使用して複数の div を表示/非表示

私の変更されたコード (以下に示す) では、すべてを非表示 (これは間違っています) およびすべてを表示できます (これは正しく機能します。CSS クラス「赤、緑、または青」を正しくターゲットにしない理由がわかりません。スクリプト内のクラス名のハード 1 つが期待どおりに機能するため、css ターゲット自体を参照する方法に問題があることは確かです。

すべてを非表示にしてすべて表示することはできますが、選択したクラスだけを表示するのは困難です。

これが私が取り組んでいるjsFiddleです：http://jsfiddle.net/juicycreative/WHpXz/4/

私のコードは以下です。
JavaScript

$('.categories li a').click(function () {
    $('.marker').hide();
    $((this).attr('target')).show();
});

$('#cat-show').click(function () {
    $('.marker').show();
});

HTML

<ul class="categories">
    <li id="cat-show" class="cat-col1" target="all" ><a href="#">All</a></li>
    <li id="cat-models" class="cat-col1" target="red" ><a href="#">Model Homes</a></li>
    <li id="cat-schools" class="cat-col1" target="blue"><a href="#">Schools</a></li>
    <li id="cat-hospital" class="cat-col1" target="green" ><a href="#">Hospitals</a></li>
</ul>

<div id="locator">
    <div id="overview-00" class="marker models" title="Maracay Homes<br />at Artesian Ranch"></div>
    <!--SCHOOLS-->
    <div id="overview-01" class="marker red" title="Perry High School">1</div>
    <div id="overview-02" class="marker red" title="Payne Jr. High School">2</div>
    <div id="overview-03" class="marker blue" title="Hamilton Prep">3</div>
    <div id="overview-04" class="marker blue" title="Ryan Elementary">4</div>
    <div id="overview-05" class="marker green" title="Chandler Traditional – Freedom">5</div>
</div>

ご回答ありがとうございます。