title: Jquery/Javascript changing img SRC with IF/ELSE statement
body: <p>i am pretty new to javascript and I am not able to get an IF/ELSE statement to work in a kind of basic configurator I am experimenting, I am sure there's something dumb I am doing.
  I have a main image that changes to show the result of a selection, the problem is that the IF statement doesn't seem to work properly, like if it wasn't going through the conditions: basically when selecting a color (black/silver) there are no problems, but when clicking on inserts it should change scr performing the if/else test to change the scr attribute accordingly.</p>
  
  <pre><code>    var img = $("#picture");
  
      $("#case_black").click(function() {
          img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
      });
  
      $("#case_silver").click(function() {
          img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
      });
  
      $("#insert_silver").click(function() {
          if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
              img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
          } else {
              img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
          }       
      }); 
  </code></pre>
  
  <p>Here is a fiddle to help you help me:</p>
  
  <p><a href="https://jsfiddle.net/1qdwaa8o/" rel="nofollow">https://jsfiddle.net/1qdwaa8o/</a></p>
  
  <p>and a snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var img = $("#picture");
   
      $("#case_black").click(function() {
      img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
    });
    
      $("#case_silver").click(function() {
      img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
    });
    
      $("#insert_silver").click(function() {
    if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
      img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
    } else {
      img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
    }  
   }); </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body{
   background-color:black;
   padding:0;
   margin:0;
   border:0;
   text-align:center;
   }
   
   .main{
   width:432px;
   height:422px;
   position:absolute;
   display:inline-block;
   margin-left:-216px;
   margin-top:10%;
   }
     
   #img_wrapper{
   width:350px;
   margin-left:41px;
   }
   
   #selector_wrapper{
   width:auto;
   }
      
      .selector_button{
   width:50px;
   height:50px;
   border-radius:25px;
   border:1px solid #1C1C1C;
   margin: 0 10px;
   cursor:pointer;
   }
   
   .clear{
   clear:both;
   }
   
   #case_black{
   background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
   float:left;
   }
   
   #case_silver{
   background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
   float:left;
   }
   
   #insert_wood{
   background-image:url("http://s32.postimg.org/ulderu3gh/wood.png");
   float:left;
   }
   
   #insert_silver{
   background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
   float:left;
   }
   
   #insert_black{
   background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
   float:left;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
   &lt;div class="main"&gt;
    &lt;div id= "img_wrapper"&gt; 
     &lt;img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" /&gt;
    &lt;/div&gt;
    &lt;div id= "selector_wrapper"&gt;
     &lt;div id= "case"&gt;
      &lt;div class= "selector_button" id= "case_black"&gt;&lt;/div&gt;
      &lt;div class= "selector_button" id= "case_silver"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class= "clear"&gt;&lt;/div&gt;
     &lt;div id= "inserts"&gt;
      &lt;div class= "selector_button" id= "insert_black"&gt;&lt;/div&gt;
      &lt;div class= "selector_button" id= "insert_silver"&gt;&lt;/div&gt;
      &lt;div class= "selector_button" id= "insert_wood"&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>