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?

• James Montagne: This line hideFeaturedArticle; does nothing at all, in each of your cases.

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>