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

Tommaso Dolfi 发表于 Dev

汤玛索·多尔菲（Tommaso Dolfi）

我对javascript很陌生，我无法获得IF / ELSE语句以在我正在尝试的一种基本配置器中工作，我敢肯定我正在做一些愚蠢的事情。我有一个更改为显示选择结果的主图像，问题是IF语句似乎无法正常工作，就像它没有通过条件一样：基本上是在选择颜色（黑色/银色）时）没问题，但是当单击插入时，应该更改scr并执行if / else测试以相应地更改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");
        }       
    });

这是一个小提琴，可以帮助您帮助我：

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>