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');
});

最初の$（this）を$（'img'）に置き換えると機能することは理解していますが、すべての画像が変更されることになり、ラジオを同じ親divの画像にのみ反映させたいと考えています。 。私を正しい方向に向ける助けをいただければ幸いです。

imgをクエリすると、画像に使用しているこれが希望どおりに機能しないのではないかと思います。

ありがとう。

4

5 に答える 5

3

next次の兄弟要素のみを選択します。メソッドを使用closestし、メソッドを使用してターゲット画像を選択できますfind。

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

imgは、ラジオボタンの祖先の「次の」兄弟です<ul>（どうやら）。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

行う必要のある変更が1つあります。

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

.parent().parent()ラジオの親コンテナとgetimgタグを取得します。

于 2013-02-12T04:32:04.977 に答える