jquery - 使用单选按钮和 jquery 更改图像

Question

我一直在尝试一些事情，但似乎并没有按照我希望的方式工作。

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

我有 3 个盒子，每个盒子都有一个唯一的 ID。每个 4 个问题，每个单选按钮都正确标记。我的脚本是按照这些行更改它的。

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

我知道如果我用 $('img') 替换第一个 $(this) 它会起作用，但它最终会改变所有图像，我只希望 radio 反射(reflect)在图像中相同的父分区。任何帮助我指明正确方向的帮助将不胜感激。

我怀疑当我查询 img 时，我用于图像的 this 不能按我想要的方式工作。

谢谢。

Answer 1

next 只选择元素的下一个兄弟元素，可以使用closest 方法，使用find 方法选择目标图像。

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