Question

Im stuck, Im setting a variable when someone clicks, then testing with if to see if the variable exists and doing something else. Its a simple script which Im probably overthinking, would love someone’s thoughts.

  $('.view-alternatives-btn').live('click', function() {



//$("#nc-alternate-wines").scrollTo();
   //$('.nc-remove').toggle();
   var showBtn = null;
   if (showBtn == null) {
   $('.view-alternatives-btn img').attr("src","../images/wsj_hide_alternatives_btn.gif");
   $('#nc-alternate-wines').show();
   showBtn = 1;
   console.log(showBtn);
   }
   else if (showBtn == 1) {
   $('.view-alternatives-btn img').attr("src","../images/wsj_view_alternatives_btn.gif");
   $('#nc-alternate-wines').hide();
   console.log("this " + showBtn);
   }
   return false; 
  });

Answer 1

The variable will never exist when you click, because it is initialized inside the function, then lost when the function ends.

If you want to store it between clicks, create it outside the click handler.

  var showBtn = null;

  $('.view-alternatives-btn').live('click', function() {

     //$("#nc-alternate-wines").scrollTo();
     //$('.nc-remove').toggle();

   if (showBtn == null) {
       $('.view-alternatives-btn img').attr("src","../images/wsj_hide_alternatives_btn.gif");
       $('#nc-alternate-wines').show();
       showBtn = 1;
       console.log(showBtn);
   }
   else if (showBtn == 1) {
       $('.view-alternatives-btn img').attr("src","../images/wsj_view_alternatives_btn.gif");
       $('#nc-alternate-wines').hide();
       console.log("this " + showBtn);
   }
   return false; 
  });