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

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

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

我明白，如果我用$（'img'）替换第一个$（this），它会起作用，但最终会改变所有图像，我只希望收音机在同一父分区的图像中反射。任何为我指明正确方向的帮助都将不胜感激

我怀疑，当我查询img时，我用于图像的this并没有按照我希望的方式工作

谢谢

img是单选按钮祖先的“下一个”兄弟姐妹。使用jQuery可以非常轻松地遍历DOM：

$(this).closest('ul').next('img')...

---

next

仅选择元素的下一个同级，您可以使用

最近的

方法并使用

find

方法选择目标图像

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

试试这个

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

---

这是文档

您需要做一个更改

$(this).parent().parent().next('img').attr('src','../images/'+$(this).attr('id')+'.jpg');

---

.parent（）.parent（）

将要做的是获取收音机的父容器和get

img

标记。

AHHA，这就是我要找的。非常感谢D使用爆炸药丸的另一种说法有什么好处？选择div或ul会更快吗？为什么对

src

使用

.prop

而不是

.attr

？@stepquick两者都选择相同的元素，如果在标记中的

ul

之后添加另一个元素，则上述语句将无效。@ExplosionPills我更喜欢使用

prop

来修改元素的属性。@undefined感谢您的澄清。除了它现在的结构之外，我没有打算添加任何内容。

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

$(this).parent().parent().next('img').attr('src','../images/'+$(this).attr('id')+'.jpg');