Refactored multiple jQuery calls to variables.

index.html

@@ -21,7 +21,7 @@
     </div>
 
     <!-- this is a simple nav bar for selecting between display methods -->
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-pills">
       <li role="" id="detailsbtn"><a href="#">Details</a></li>
       <li role="" id="modalbtn"><a href="#">Modal</a></li>
     </ul>
@@ -57,14 +57,11 @@
   -->
   <script id="modal-template" type="text/x-handlebars-template">
     <div id="imageModal" class="modal fade" role="dialog">
-      <div class="modal-dialog" style="width:800">
-
+      <div class="modal-dialog" style="width:800px">
         <div class="modal-content">
-
           <div class="modal-body">
             <img style="width:100%" src="{{src}}" />
           </div>
-
         </div>
 
       </div>
@@ -76,13 +73,11 @@
     // This time we have two templates
     // we compile both of them and store the
     // results in separate variables
-    var source = $("#detail-template").html();
-
-    var detail_template = Handlebars.compile(source);
+    var detailsSource = $("#detail-template").html();
+    var detail_template = Handlebars.compile(detailsSource);
 
-    source = $("#modal-template").html();
-
-    var modal_template = Handlebars.compile(source);
+    var modalSource = $("#modal-template").html();
+    var modal_template = Handlebars.compile(modalSource);
 
     // this is the data object we will be using
     var data = {
@@ -91,40 +86,41 @@
       author: "Ed g2s"
     };
 
-    var image1Data = {
-      title: "image1",
-      author: "Tuxtso",
-      src: "https://upload.wikimedia.org/wikipedia/commons/archive/9/97/20101017074210%21The_Earth_seen_from_Apollo_17.jpg",
-    };
-    //print out the variables
-    console.log(image1Data.author + " " + image1Data.title + " " + image1Data.src);
+    // Print out the variables
+    console.log(data.author + " " + data.title + " " + data.src);
+
+    var $content = $('#content');
+    var $detailsbtn = $("#detailsbtn");
+    var $imageModal;
 
     // this instantiates the detail template
-    $("#detailsbtn").click(function () {
+    $detailsbtn.click(function () {
       // hide the modal if it is showing
-      $("#imageModal").modal('hide');
+      if ($imageModal) {
+        $imageModal.modal('hide');
+      }
 
       //use the detail template to generate html
       // and put it in the DOM
       var html = detail_template(data);
-      $('#content').html(html);
+      $content.html(html);
     });
 
+    // this instantiates the modal template
     $("#modalbtn").click(function () {
-      //use the modal template to generate html
+      // Use the modal template to generate html
       // and put it in the DOM
       var html = modal_template(data);
-      $('#content').html(html);
+      $content.html(html);
 
-      /* we can only show the modal once the
-       template has been instantiated
+      /* We can only show the modal once the template has been instantiated
        because it does not exist before */
-      $("#imageModal").modal('show');
+      $imageModal = $("#imageModal").modal('show');
 
       // create a call back for when the model is
       // hidden so we can re-display the detail template
-      $('#imageModal').on('hidden.bs.modal', function () {
-        $("#detailsbtn").click();
+      $imageModal.on('hidden.bs.modal', function () {
+        $detailsbtn.click();
       });
     });
   </script>