0
\$\begingroup\$

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?

\$\endgroup\$
  • 1
    \$\begingroup\$ This line hideFeaturedArticle; does nothing at all, in each of your cases. \$\endgroup\$ – James Montagne Apr 10 '15 at 20:01
1
\$\begingroup\$

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>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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