3

我一直在尝试一些事情，但这似乎并不像我希望的那样工作。

<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 时，我用于图像的 this 不能按我想要的方式工作。

谢谢。

4

5 回答 5

3

next只选择元素的下一个兄弟元素，可以使用closestmethod和使用method选择目标图像find。

$('input[type=radio]').change(function(){
    $(this)
         .closest('div')
         .find('img')
         .prop('src','../images/'+this.id+'.jpg');
});
于 2013-02-12T04:27:18.163 回答
2

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

$(this).closest('ul').next('img')...
于 2013-02-12T04:27:08.007 回答
2 
$('input[type=radio]').change(function(){
    $(this).closest('div').find('img').attr('src','../images/'+$(this).attr('id')+'.jpg');
});

.closest()

于 2013-02-12T04:27:45.383 回答
2

尝试这个

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

这是文档http://api.jquery.com/closest/

于 2013-02-12T04:29:25.553 回答
1

您需要进行一项更改。

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

要做.parent().parent()的是获取收音机的父容器和getimg标签。

于 2013-02-12T04:32:04.977 回答