Tommaso Dolfi Tommaso Dolfi - 6 months ago 15
Javascript Question

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.
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>




Answer

img is a jQuery object, therefore img.src will be undefined.

You need to test img[0].src or img.prop('src').

Comments