Jquery/Javascript changing img SRC with IF/ELSE statement
Question
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. 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.
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/
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 answers
solution1
1 ACCPTED 2016-05-08 15:34:10
img is a jQuery object, therefore img.src will be undefined .
You need to test img[0].src or img.prop('src') .
solution2
0 2016-05-08 15:37:45
Get/set src of image using img.attr("src") and not img.src
Or you can make use of: img.get(0).src . img.get(0) is similar to document.querySelector('someSelectorToSelectYourImageAbove').src;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.