Question

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

这是帮助你帮助我的小提琴：

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>

Answer 1

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

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

Answer 2

使用img.attr("src")而不是img.src

获取/设置图像的src

或者您可以使用：img.get(0).src。 img.get(0)与document.querySelector('someSelectorToSelectYourImageAbove').src;

类似

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

2 个答案: