Look out for

Making the same jQuery selections within functions and across code blocks.

Resolve by

Storing jQuery objects as variables so they can be reused.

$('.photo-list').on( 'click', 'a', function( event ) {
  // make jQuery selections with each click
  $('.gallery__image').attr( 'src', $( this ).attr('href') );
  $('.gallery__title').text( $( this ).text() );
  $('.gallery__caption').text( $( this ).attr('title') );
});

Edit this demo on CodePen

// get jQuery objects once
var $galleryImage = $('.gallery__image');
var $galleryTitle = $('.gallery__title');
var $galleryCaption = $('.gallery__caption');

$('.photo-list').on( 'click', 'a', function( event ) {
  // get clicked element
  var $link = $( this );
  // use cached jQuery objects
  $galleryImage.attr( 'src', $link.attr('href') );
  $galleryTitle.text( $link.text() );
  $galleryCaption.text( $link.attr('title') );
});

Edit this demo on CodePen

Look out for

Checking if an element has a class.

Resolve by

Using a variable to keep track of state.

$toggleButton.on( 'click', function() {
  $modal.toggleClass('is-open');
  // check state by checking DOM
  if ( $modal.hasClass('is-open') ) {
    $toggleButton.text('Close');
  } else {
    $toggleButton.text('View more');
  }
});

Edit this demo on CodePen

// use state variable to keep track
var isModalOpen = false;

$toggleButton.on( 'click', function() {
  isModalOpen = !isModalOpen;
  $modal.toggleClass('is-open');
  if ( isModalOpen ) {
    $toggleButton.text('Close');
  } else {
    $toggleButton.text('View more');
  }
});

Edit this demo on CodePen

Look out for

Similar repeated code.

Resolve by

Using a function to perform same code over multiple things.

// button row 1
var $buttonRow1 = $('.button-row1');
var $activeButton1 = $buttonRow1.find('.button.is-active');

$buttonRow1.on( 'click', '.button', function() {
  // deactivate previous button
  $activeButton1.removeClass('is-active');
  // set & activate new button
  $activeButton1 = $( this );
  $activeButton1.addClass('is-active');
});

// button row 2
var $buttonRow2 = $('.button-row2');
var $activeButton2 = $buttonRow2.find('.button.is-active');

$buttonRow2.on( 'click', '.button', function() {
  $activeButton2.removeClass('is-active');
  $activeButton2 = $( this );
  $activeButton2.addClass('is-active');
});

// button row 2
var $buttonRow3 = $('.button-row3');
var $activeButton3 = $buttonRow3.find('.button.is-active');

$buttonRow3.on( 'click', '.button', function() {
  $activeButton3.removeClass('is-active');
  $activeButton3 = $( this );
  $activeButton3.addClass('is-active');
});

Edit this demo on CodePen

// use .each() to call function for each button row
$('.button-row').each( function() {
  var $buttonRow = $( this );
  var $activeButton = $buttonRow.find('.button.is-active');

  $buttonRow.on( 'click', '.button', function() {
    // deactivate previous button
    $activeButton.removeClass('is-active');
    // set & activate new button
    $activeButton = $( this );
    $activeButton.addClass('is-active');
  });
});

Edit this demo on CodePen

Look out for

jQuery's this in .each() and event functions.

Resolve by

Using .each() element argument and event.currentTarget

// 'this' used twice for two different elements
$('.button-row').each( function() {
  // 'this' 1
  var $buttonRow = $( this );
  var $activeButton = $buttonRow.find('.button.is-active');

  $buttonRow.on( 'click', '.button', function() {
    $activeButton.removeClass('is-active');
    // 'this' 2
    $activeButton = $( this );
    $activeButton.addClass('is-active');
  });
});

Edit this demo on CodePen

// replacing 'this'
$('.button-row').each( function( i, buttonRow ) {
  // .each() element argument
  var $buttonRow = $( buttonRow );
  var $activeButton = $buttonRow.find('.button.is-active');

  $buttonRow.on( 'click', '.button', function( event ) {
    $activeButton.removeClass('is-active');
    // event.currentTarget
    $activeButton = $( event.currentTarget );
    $activeButton.addClass('is-active');
  });
});

Edit this demo on CodePen

Look out for

Complicated selectors that concatenate variables and strings.

Resolve by

Using child and filter selecting methods like .find(), .filter(), and .eq().

$('.gallery').each( function( index ) {
  var number = index + 1;
  var $nav = $('.gallery__nav' + number );
  var $activeTab = $('.gallery__tab-container' + number +
    ' .gallery__tab.is-active');
});

Edit this demo on CodePen

$('.gallery').each( function( index, gallery ) {
  var $gallery = $( gallery );
  var $nav = $gallery.find('.gallery__nav');
  var $tabs = $gallery.find('.gallery__tab');
  var $activeTab = $tabs.filter('.is-active');
});

Edit this demo on CodePen

Look out for

Long, repetitive conditionals checking over the same value.

Resolve by

Using a hash map. Set data in an list-like object and access values with variables.

var stateName;
  if ( value == 'DE' ) {
    stateName = 'Delaware';
  } else if ( value == 'MA' ) {
    stateName = 'Massachusetts';
  } else if ( value == 'MD' ) {
    stateName = 'Maryland';
  } else if ( value == 'NJ' ) {
    stateName = 'New Jersey';
  }
});

Edit this demo on CodePen

var stateNames = {
  DE: 'Delaware',
  MA: 'Massachusetts',
  MD: 'Maryland',
  NJ: 'New Jersey',
};

var stateName = stateNames[ value ];

Edit this demo on CodePen