Difficulty with selective show/hide based on CSS class

Question

I'm working on a js script which will show / hide multiple divs based on css class, seemingly pretty simple. I set out to find an example of this and found something close in the article linked below. I used the code in the following link as a starting point.

Show/hide multiple divs using JavaScript

In my modified code (shown below) I am able to hide all (which is errant) and show all (which works correctly. I'm not sure why its not targeting the CSS class "red, green or blue" correctly. If I hard one of the class names in the script it works as expected, so I'm fairly certain I'm having an issue in the way I'm referencing the css targets themselves.

I am able to hide all and show all, yet I'm having difficulty showing only the selected class.

Here is the jsFiddle I'm working with: http://jsfiddle.net/juicycreative/WHpXz/4/

My code is below.
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>

Thanks in advance for any responses.

Answer 1

$((this).attr('target')).show();

This is syntactically incorrect. It should be $($(this).attr('target'))

However that's no good either because this is the anchor element that does not have the target. Use $(this).closest('li').attr('target') (or add the target to the <a> ).

This is also semantically incorrect as that would interpolate to $("red") which would try to look for a <red> element.

$("." + $(this).closest('li').attr('target'))

http://jsfiddle.net/WHpXz/5/

Answer 2

You are almost there. This is the line that needs tweaking: $((this).attr('target')).show();

$(this) actually refers to the current anchor tag that was clicked. Since the anchor tag doesn't have the target attribute, you need to go up to the parent.

From there, you can get the target and add the '.' to the color to use as a selector.

var catToShow = $(this).parent().attr('target');
$('.' + catToShow).show();

I've edited your fiddle. Give it a shot.

http://jsfiddle.net/juicycreative/WHpXz/4/