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>