Как изменить цвет одного элемента, нажав на другой - jQuery

Question

У меня есть тест с множественным выбором на английском/тайском языке. В каждой строке есть вопрос и 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> 

Когда пользователь нажимает на одну из A, B, C или D выбор, я хочу, пункт вопрос в этой строке, чтобы изменить зеленый (правильный) или красный (неверный). Моя проблема заключается в том, как в любой строке связать цель с кликом (A, B, C или D) с изменением requicolor. Я вижу, что addClass и removeClass будут обрабатывать изменение цвета, но я не вижу, как установить соединение между нажатыми на ответ и элементами вопроса. Я пронумеровал строки в каждом столбце, чтобы связать соответствующий вопрос, но я не знаю, если это необходимо. Спасибо за любую помощь.

Answer 1

См .click()

$("#other").click(function() { 
    $("#target").css("background", "red"); 
}); 

Answer 2

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> 

Javascript с помощью JQuery

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

Просто измените сценарий, как вам нужно. Надеюсь, на этот раз это правильно. =))