Change image with radio button and jquery
I've tried a few things and it doesn't seem to work the way I want it to.
<div id="box1">
<h2>Question 1</h2>
<ul>
<li><input type="radio" id="q1a" name="q1"><label for="q1a">A</label></li>
<li><input type="radio" id="q1b" name="q1"><label for="q1b">B</label></li>
<li><input type="radio" id="q1c" name="q1"><label for="q1c">C</label></li>
<li><input type="radio" id="q1d" name="q1"><label for="q1d">D</label></li>
</ul>
<img src="../images/q1.jpg" alt="" class="src">
</div>
<div id="box2">
<h2>Question 2</h2>
<ul>
<li><input type="radio" id="q2a" name="q2"><label for="q2a">A</label></li>
<li><input type="radio" id="q2b" name="q2"><label for="q2b">B</label></li>
<li><input type="radio" id="q2c" name="q2"><label for="q2c">C</label></li>
<li><input type="radio" id="q2d" name="q2"><label for="q2d">D</label></li>
</ul>
<img src="../images/q2.jpg" alt="" class="src">
</div>
<div id="box3">
<h2>Question 3</h2>
<ul>
<li><input type="radio" id="q3a" name="q3"><label for="q3a">A</label></li>
<li><input type="radio" id="q3b" name="q3"><label for="q3b">B</label></li>
<li><input type="radio" id="q3c" name="q3"><label for="q3c">C</label></li>
<li><input type="radio" id="q3d" name="q3"><label for="q3d">D</label></li>
</ul>
<img src="../images/q3.jpg" alt="" class="src">
</div>
I have 3 boxes, each with a unique ID. 4 questions each, each radio button labeled correctly. My script for changing it along these lines.
$('input[type=radio]').change(function(){
$(this).next('img').attr('src','../images/'+$(this).attr('id')+'.jpg');
});
I understand that if I were to replace the first $ (this) with $ ('img') that it would work, but that would cause all the images to change and I want the radio to reflect the image to the same parent div. Any help pointing me in the right direction would be much appreciated.
I suspect that when I ask img, this is what I use for images, doesn't work the way I want it to.
Thank.
next
selects only the next item using that item, you can use the method closest
and select the target image using the method find
.
$('input[type=radio]').change(function(){
$(this)
.closest('div')
.find('img')
.prop('src','../images/'+this.id+'.jpg');
});
img is the "next" sibling of the <ul>
switch ancestor (presumably). You can traverse the DOM easily with jQuery:
$(this).closest('ul').next('img')...
$('input[type=radio]').change(function(){
$(this).closest('div').find('img').attr('src','../images/'+$(this).attr('id')+'.jpg');
});
... closeest ()
try it
$('input[type=radio]').change(function(){
$(this).closest('div').find('img')
.attr('src','../images/'+$(this).attr('id')+'.jpg');
});
Here are the docs http://api.jquery.com/closest/
There is one change you need to make.
$(this).parent().parent().next('img').attr('src','../images/'+$(this).attr('id')+'.jpg');
what .parent().parent()
will do is get parent radio container and get tag img
.