Question

I’ve been trying out a few things and this appears to not working quite the way I wish 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 replaced the first $(this) with $(‘img’) that it would work, but it would end up changing all the images, and I only want the radio to reflect in the image in the same parent div. Any help pointing me towards the right direction would be much appreciated.

I suspect that when I query for the img, the this i’m using for the images doesn’t work the way I want it to.

Thanks.

Answer 1

next only selects the next sibling the element, you can use closest method and select the target image using find method.

$('input[type=radio]').change(function(){
    $(this)
         .closest('div')
         .find('img')
         .prop('src','../images/'+this.id+'.jpg');
});