jQuery makes writing browser JavaScript so accessible, it's easy to skip over some of JavaScript’s core concepts. Fizzy School covers these concepts so novice developers can fill in the missing areas in learning JavaScript and jQuery.

Cache jQuery objects

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

Read lesson: Cache jQuery objects

State variables

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

Read lesson: State variables

Un-repeat with functions

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

Read lesson: Un-repeat with functions

Replace jQuery's this

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

Read lesson: Replace jQuery's this

Simplify selectors

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

Read lesson: Simplify selectors

Hash maps

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

Read lesson: Hash maps