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）它会起作用，但它最终会改变所有图像，我只希望收音机反映在图像中相同的父div。任何帮助我指向正确方向的人都会非常感激。

我怀疑当我查询img时，我用于图像的这种方法并不像我想要的那样工作。

感谢。

Answer 1

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

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

Answer 2

img是单选按钮（显然）的祖先<ul>的“下一个”兄弟。您可以使用jQuery轻松遍历DOM：

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

Answer 3

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

.closest()

Answer 4

试试这个

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

以下是文档http://api.jquery.com/closest/

Answer 5

您需要进行一项更改。

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

.parent().parent()将要做的是获取无线电的父容器和获取img标记。

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

5 个答案: