perform: Part 1 code vs. the code from the download

I was having trouble getting the code from the first part of the canvas drawing project to work. I downloaded the app.js file so I could check them side by side and saw it was different than the code from the video. I pasted the downloaded code in and it worked with no problem. I am running chrome on a pc (I was having the same issue on my mac), and I refreshed it before I tried any interaction. Why is the code that much different, is it a change that takes place later in the video? Has anyone else had this problem?

Below is the video code vs. the code from the download. It is only the code used for the first part of the project, and the comments between the lines were removed.

//code from the video

var color = $(".selected").css("background-color");

$(".controls li").click(function() {
   $(this).siblings().removeClass("selected");
  $(this).addClass("selected");
  color = $(this).css("background-color");
});

//code from the download

var color = $(".selected").css("background-color");

$(".controls").on("click", "li", function(){
  $(this).siblings().removeClass("selected");
  $(this).addClass("selected");
  color = $(this).css("background-color");
});