如何通过单击另一个元素来更改一个元素的颜色-jquery

我在英语/泰语网站上进行了多项选择题测试。每行有一个问题和4个答案选项，布局基本上是一个50X5矩阵

    <div id="question">
        <p class="word_test">1<span class="1 color_up audio" id="b1e01">the </span></p>
        ...
        <p class="word_test">50<span class="50 color_up audio" id="b1e50">if </span></p>
    </div>
    <div id="answers">
        <div id="col_a">
            <p class="word_test">A:<span class="1 color_up audio" id="b1t01">คำนำหน้านาม</span></p>
                ...
            <p class="word_test">A:<span class="50 color_up incorrect">มัน </span></p>
        </div>
        <div id="col_b">
          ...
         </div>
        <div id="col_c">
          ...
        </div>
        <div id="col_d">
            <p class="word_test">D:<span class="1 color_up incorrect">เลอะ </span></p>
                ...
            <p class="word_test">D:<span class="50 color_up incorrect">เป็น อยู่ คือ </span>    </p>
        </div>
    </div>

1
...
50if
A：คำนำหน้านาม
...
A：มัน 
...
...
D:เลอะ 

...
D:เป็น อยู่ คือ     

当用户单击A、B、C或D选项之一时，我希望该行中的问题项变为绿色（正确）或红色（不正确）。我的问题是如何在任何一行中将单击的目标（A、B、C或D）链接到颜色更改。我可以看到addClass和removeClass将处理颜色变化，但我看不到如何在单击的答案和问题项之间建立连接。我已经对每列中的行进行了编号，以便可以引用相应的问题，但我不知道这是否必要。谢谢你的帮助

见

HTML和CSS

我认为你不需要锚来点击，因为这一次脚本会在单选按钮被触发后立即检查答案

<style type="text/css">
    .hide { display:none; }
</style>

<div class="questions">
    <p>Q1</p>
    <label><input type="radio" name="q1" value="a" />Q1 A</label>
    <label><input type="radio" name="q1" value="b" />Q1 B</label>
    <label><input type="radio" name="q1" value="c" />Q1 C</label>
</div>

<div class="questions hide">
    <p>Q2</p>
    <label><input type="radio" name="q2" value="a" />Q2 A</label>
    <label><input type="radio" name="q2" value="b" />Q2 B</label>
    <label><input type="radio" name="q2" value="c" />Q2 C</label>
</div>

<div class="questions hide">
    <p>Q3</p>
    <label><input type="radio" name="q3" value="a" />Q3 A</label>
    <label><input type="radio" name="q3" value="b" />Q3 B</label>
    <label><input type="radio" name="q3" value="c" />Q3 C</label>
</div>

---

只需根据需要修改脚本。希望这一次适合你

您可以显示您的

jQuery

code吗？

jQuery（“div#answers”）。单击（函数（evnt）{if（audioisplay！==true）{var elementId=evnt.target.id；var pathVar=document.getElementById（“pathVar”）.innerHTML；var oggVar=pathVar+elementId+“.ogg”；var audioElement=document.createElement（“audio”）；audioElement.setAttribute（“src”，oggVar）；audioElement.load（）；audioElement.play（）；audioisplay=true；audioElement.addEventListener（“end”，function（）{audioisplay=false；}）；}；}；}）//类似错误响应的代码

对不起，我想我没有说清楚，用户单击页面中的实际单词，这会激活一个音频文件，请参阅上面发布的jquery代码。我以前应该包括这个。我现在的问题是如何更改问题项的颜色。代码需要选择行号1、2等，并使用它在问题div中定位相应的行，然后为问题项着色。

<style type="text/css">
    .hide { display:none; }
</style>

<div class="questions">
    <p>Q1</p>
    <label><input type="radio" name="q1" value="a" />Q1 A</label>
    <label><input type="radio" name="q1" value="b" />Q1 B</label>
    <label><input type="radio" name="q1" value="c" />Q1 C</label>
</div>

<div class="questions hide">
    <p>Q2</p>
    <label><input type="radio" name="q2" value="a" />Q2 A</label>
    <label><input type="radio" name="q2" value="b" />Q2 B</label>
    <label><input type="radio" name="q2" value="c" />Q2 C</label>
</div>

<div class="questions hide">
    <p>Q3</p>
    <label><input type="radio" name="q3" value="a" />Q3 A</label>
    <label><input type="radio" name="q3" value="b" />Q3 B</label>
    <label><input type="radio" name="q3" value="c" />Q3 C</label>
</div>

var answers = {q1: 'a', q2: 'b', q3: 'a'};
/* True Answers: ↑ "a" ,  ↑ "b"  ,  ↑ "a" */
$('input:radio').click(function() {
    var container = $(this).parents('div');
    var question = $(this).attr('name');
    var answer = $(this).val();

    alert(answers[question] == answer);

    container.addClass('hide');
    container.next().removeClass('hide');
});