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?

This line hideFeaturedArticle; does nothing at all, in each of your cases. — James Montagne, Apr 10 '15 at 20:01

DelightedD0D · Answer 1 · 2015-04-12 13:03:51Z

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>

asked	1 year ago
viewed	81 times
active	1 year ago

current community

your communities

more stack exchange communities

Optimizing jQuery/JS Switch Statement

1 Answer 1

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:

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript beginner performance jquery or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

Optimizing jQuery/JS Switch Statement

1 Answer 1

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:

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript beginner performance jquery or ask your own question.

Related

Hot Network Questions