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.

Explosion Pills · Accepted Answer · 2013-06-25 23:25:18Z

0

$((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/

answered Jun 25, 2013 at 23:25

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Self · Accepted Answer · 2013-06-25 23:29:30Z

0

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/

answered Jun 25, 2013 at 23:29

Justin Self

6,3053 gold badges35 silver badges49 bronze badges

Collectives™ on Stack Overflow

Difficulty with selective show/hide based on CSS class

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related