javascript - Jquery/Javascript 使用 IF/ELSE 语句更改 img SRC-6ren

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

转载作者：行者123 更新时间：2023-11-30 00:09:28

我是 javascript 的新手，我无法让 IF/ELSE 语句在我正在试验的一种基本配置器中工作，我确信我在做一些愚蠢的事情。我有一个主图像发生变化以显示选择的结果，问题是 IF 语句似乎无法正常工作，就像它没有通过条件一样:基本上在选择颜色时(黑色/银色) 没有问题，但是当单击插入时，它应该更改执行 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>