[英]Jquery/Javascript changing img SRC with IF/ELSE statement
我对 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>
img
是一个 jQuery 对象,因此img.src
将是undefined
。
您需要测试img[0].src
或img.prop('src')
。
使用img.attr("src")
而不是img.src
获取/设置图像的img.attr("src")
或者您可以使用: img.get(0).src
。 img.get(0)
类似于document.querySelector('someSelectorToSelectYourImageAbove').src;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.