Jquery/Javascript 使用 IF/ELSE 语句更改 img SRC
[英]Jquery/Javascript changing img SRC with IF/ELSE statement
问题描述
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.
我对 javascript 很陌生，我无法让 IF/ELSE 语句在我正在试验的一种基本配置器中工作，我确信我正在做一些愚蠢的事情。 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.我有一个主图像，它会更改以显示选择的结果，问题是 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");
}
});
Here is a fiddle to help you help me:这是一个可以帮助您帮助我的小提琴：
https://jsfiddle.net/1qdwaa8o/ https://jsfiddle.net/1qdwaa8o/
and a snippet:和一个片段：
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>
2 个解决方案
解决方案1
1 已采纳 2016-05-08 15:34:10
img is a jQuery object, therefore img.src will be undefined . img是一个 jQuery 对象，因此img.src将是undefined 。
You need to test img[0].src or img.prop('src') .您需要测试img[0].src或img.prop('src') 。
解决方案2
0 2016-05-08 15:37:45
Get/set src of image using img.attr("src") and not img.src使用img.attr("src")而不是img.src获取/设置图像的img.attr("src")
Or you can make use of: img.get(0).src .或者您可以使用： img.get(0).src 。 img.get(0) is similar to document.querySelector('someSelectorToSelectYourImageAbove').src; img.get(0)类似于document.querySelector('someSelectorToSelectYourImageAbove').src;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.