Optimizing jQuery/JS Switch Statement

Question

I am trying to optimize the following switch statement, but I'm having a brain fart about how to do it. Here's the code:

$('.newsroom-tabs div.pane-content ul li').click(function(){ // get the class name of the clicked link var className = $(this).attr('class'); // variable so that jQuery isn't traversing the DOM each time var hideFeaturedArticle = $('.featured-article').hide(); // based on the category selected, the featured article will // show for that section switch(className) { case 'air-quality-news-tab': hideFeaturedArticle; $('.featured-article.aqn').fadeIn(300); break; case 'awards-and-reviews-tab': hideFeaturedArticle; $('.featured-article.aar').fadeIn(300); break; case 'in-the-community-tab': hideFeaturedArticle; $('.featured-article.itc').fadeIn(300); break; case 'press-releases-tab': hideFeaturedArticle; $('.featured-article.pr').fadeIn(300); break; default: return className; } }); 

I feel like hiding the tabs each time is inefficient, but I'm not sure how to do this otherwise. Is there anything else I could do better here?

Answer 1

I notice that the elements you show have classes namesd after the elements you click.

For example:

• The element with the class air-quality-news-tab
• Will show the elements matching selector ".featured-article .aqn"

If this will always be the case, you could just reduce the clicked class down to the initials and use that to select the appropriate element like this:

(note that someone better at regex than me could probably make this even shorter)

$('.newsroom-tabs div.pane-content ul li').click(function() { var className = $.map($(this).attr('class').split('-'), function(val) { return val.match(/^[a-z]/i); }).join('').replace(/t$/i, ''); $('.featured-article').hide(); $('.featured-article.' + className).fadeIn(300); });

.featured-article { display: none; width: 300px; height: 200px; background-color: #cccccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="newsroom-tabs"> <div class="pane-content"> <ul> <li class="air-quality-news-tab">air-quality-news-tab</li> <li class="awards-and-reviews-tab">awards-and-reviews-tab</li> <li class="in-the-community-tab">in-the-community-tab</li> <li class="press-releases-tab">press-releases-tab</li> </ul> </div> </div> <div class="featured-article aqn">aqn</div> <div class="featured-article aar">aar</div> <div class="featured-article itc">aqn</div> <div class="featured-article pr">pr</div>