Jquery/Javascript 使用 IF/ELSE 语句更改 img SRC

Jquery/Javascript changing img SRC with IF/ELSE statement

我是 javascript 的新手,我无法在我正在试验的一种基本配置器中使用 IF/ELSE 语句,我确信我在做一些愚蠢的事情. 我有一个主图像发生变化以显示选择的结果,问题是 IF 语句似乎无法正常工作,就像它没有通过条件一样:基本上在选择颜色时(black/silver) 没有问题,但是当点击插入时它应该改变执行 if/else 测试的 scr 以相应地改变 scr 属性。

    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");
        }       
    }); 

这里有一个fiddle帮你帮我:

https://jsfiddle.net/1qdwaa8o/

和一个片段:

 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");
  }  
 }); 
 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;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
 <div class="main">
  <div id= "img_wrapper"> 
   <img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" />
  </div>
  <div id= "selector_wrapper">
   <div id= "case">
    <div class= "selector_button" id= "case_black"></div>
    <div class= "selector_button" id= "case_silver"></div>
   </div>
   <div class= "clear"></div>
   <div id= "inserts">
    <div class= "selector_button" id= "insert_black"></div>
    <div class= "selector_button" id= "insert_silver"></div>
    <div class= "selector_button" id= "insert_wood"></div>
   </div>
  </div>
 </div>
</body>

img 是一个 jQuery 对象,因此 img.src 将是 undefined

您需要测试 img[0].srcimg.prop('src')

Get/set 图像的 src 使用 img.attr("src") 而不是 img.src

或者您可以使用:img.get(0).srcimg.get(0) 类似于 document.querySelector('someSelectorToSelectYourImageAbove').src;