Question

I’m trying to find jQuery functions that might make this jQuery code shorter. I tried looking at toggle, but i couldn’t see how it could work. I’m just trying to learn jQuery’s best practices at the moment. Thank you.

$(".play").click(function (e) {
  e.preventDefault();
  video.ref.playVideo();
  $(".play").hide();
  $(".pause").show();
});
$(".pause").click(function (e) {
  e.preventDefault();
  video.ref.pauseVideo();
  $.(".pause").hide();
  $(".play").show();
});

Answer 1

I can’t think of how to make it shorter, but it can perform better by caching the two main jQuery objects and referring to the current object $(this) when possible.

var $_play = $('#play'),
    $_pause = $('#pause');
$_play.click(function(e){
    video.ref.playVideo();
    $(this).hide();
    $_pause.show();
    e.preventDefault();
});
$_pause.click(function(e){
    video.ref.pauseVideo();
    $(this).hide();
    $_play.show();
    e.preventDefault();
});