Monday, August 26, 2013

How to change color of one element by clicking on another - jquery

How to change color of one element by clicking on another - jquery

I've got a multiple choice test on a English/Thai language web site. Each
row has a question and 4 answer choices, the layout is essentially a 50X5
matrix.
<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>
When the user clicks on one of the A,B,C or D choices, I want the question
item in that row to change to green (correct) or red (incorrect). My
problem is how in any one row to link the clicked target (A,B,C or D) to
the requicolor change. I can see that addClass and removeClass would
handle the color change but I can't see how to make the connection between
the clicked on answer and the question items. I've numbered the rows in
each column so that the corresponding question can be referenced but I
don't know if that is necessay. Thanks for any help.

No comments:

Post a Comment