How do I change color of a text when its clicked using jquery?
<p>I am trying hard to change the color of a text when it is clicked but not getting success.
There is one label for <code>question</code>, four labels for four <code>options</code>, one label for <code>correct answer</code> and one label for <code>explanation</code>.</p>

<p>What I am trying is when user click on any <code>option</code> then it should match with the <code>correct answer</code> and change the color of the text of that option i.e. when the answer is correct the text color should turn to green otherwise the color should turn to red .</p>

<p>But when I click on any <code>option</code> it is turning to red color only . Correct <code>option</code> should turn to green but it is turning to red . I can't figure out why ?.
Have a look at my code. Show me where I am making mistake and what is the solution.</p>

<p><b>.aspx :- </b></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Student/StudentPage.master" AutoEventWireup="true" CodeFile="studpractice.aspx.cs" Inherits="Student_studpractice" %&gt;

&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"&gt;
&lt;/asp:Content&gt;
&lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"&gt;

    &lt;script type="text/javascript"&gt;


        $(function () {

            $(".optionclass").click(function () {
                var $thisoption = $(this);
                var $corrans = $(".correctans");

                if ($thisoption.text() == $corrans.text()) {
                    $thisoption.css("color", "green");
                } else {
                    $thisoption.css("color", "red");
                }
            });

        });


    &lt;/script&gt;
    &lt;div&gt;
        &lt;div id="tabs"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#tabs-1"&gt;Reasoning&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-2"&gt;Quantitative Aptitude&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-3"&gt;English&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-4"&gt;Mathematics&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-5"&gt;Computer Concepts&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabs-1"&gt;
        &lt;asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" width="100%"&gt;
    &lt;Columns&gt;
        &lt;asp:TemplateField&gt;
            &lt;ItemTemplate&gt;

        &lt;asp:Panel ID="Panel1" runat="server"&gt;

            &lt;asp:Label ID="Label1" runat="server" Text='&lt;%#Eval("Question") %&gt;'&gt;&lt;/asp:Label&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
           &lt;span&gt;A-&lt;/span&gt;&lt;a href="javascript:void(0);" style="text-decoration:none;"&gt; &lt;asp:Label class="optionclass" ID="Label2" runat="server" Text='&lt;%#Eval("Option1")%&gt;' &gt;&lt;/asp:Label&gt;&lt;/a&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;span&gt;B-&lt;/span&gt;&lt;a href="javascript:void(0);" style="text-decoration:none;"&gt; &lt;asp:Label class="optionclass" ID="Label3" runat="server" Text='&lt;%#Eval("Option2")%&gt;'&gt;&lt;/asp:Label&gt;&lt;/a&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;span&gt;C-&lt;/span&gt;&lt;a href="javascript:void(0);" style="text-decoration:none;"&gt; &lt;asp:Label class="optionclass" ID="Label4" runat="server" Text='&lt;%#Eval("Option3")%&gt;'&gt;&lt;/asp:Label&gt;&lt;/a&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;span&gt;D-&lt;/span&gt;&lt;a href="javascript:void(0);" style="text-decoration:none;"&gt; &lt;asp:Label class="optionclass" ID="Label5" runat="server" Text='&lt;%#Eval("Option4")%&gt;'&gt;&lt;/asp:Label&gt;&lt;/a&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &amp;nbsp;&amp;nbsp;
            &lt;asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" /&gt;
            &lt;br /&gt;

            &lt;asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static"&gt;

                &lt;span&gt;Correct Answer is :-&lt;/span&gt;&lt;asp:Label class="correctans" ID="Label6" runat="server" Text='&lt;%#Eval("CorrectAns")%&gt;'&gt;&lt;/asp:Label&gt;
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;asp:Label ID="Label7" runat="server" Text='&lt;%#Eval("Explanation")%&gt;'&gt;&lt;/asp:Label&gt;


            &lt;/asp:Panel&gt;


        &lt;/asp:Panel&gt;
        &lt;br /&gt;
        &lt;br /&gt;

                 &lt;/ItemTemplate&gt;
        &lt;/asp:TemplateField&gt;
    &lt;/Columns&gt;
&lt;/asp:GridView&gt;
    &lt;/div&gt;
    &lt;div id="tabs-2"&gt;
       
        &lt;asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" &gt;
    &lt;Columns&gt;
        &lt;asp:TemplateField&gt;
            &lt;ItemTemplate&gt;

        &lt;asp:Panel ID="Panel1" runat="server"&gt;

            &lt;asp:Label ID="Label1" runat="server" Text='&lt;%#Eval("Question") %&gt;'&gt;&lt;/asp:Label&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
           &lt;span&gt;A-&lt;/span&gt;&lt;a href="javascript:void(0);" style="text-decoration:none;"&gt; &lt;asp:Label class="optionclass" ID="Label2" runat="server" Text='&lt;%#Eval("Option1")%&gt;'&gt;&lt;/asp:Label&gt;&lt;/a&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;span&gt;B-&lt;/span&gt;&lt;a href="javascript:void(0);" style="text-decoration:none;"&gt; &lt;asp:Label class="optionclass" ID="Label3" runat="server" Text='&lt;%#Eval("Option2")%&gt;'&gt;&lt;/asp:Label&gt;&lt;/a&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;span&gt;C-&lt;/span&gt;&lt;a href="javascript:void(0);" style="text-decoration:none;"&gt; &lt;asp:Label class="optionclass" ID="Label4" runat="server" Text='&lt;%#Eval("Option3")%&gt;'&gt;&lt;/asp:Label&gt;&lt;/a&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;span&gt;D-&lt;/span&gt;&lt;a href="javascript:void(0);" style="text-decoration:none;"&gt; &lt;asp:Label class="optionclass" ID="Label5" runat="server" Text='&lt;%#Eval("Option4")%&gt;'&gt;&lt;/asp:Label&gt;&lt;/a&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
            &lt;asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" /&gt;
            &lt;br /&gt;

            &lt;asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static"&gt;

                &lt;span&gt;Correct Answer is :-&lt;/span&gt;&lt;asp:Label class="correctans" ID="Label6" runat="server" Text='&lt;%#Eval("CorrectAns")%&gt;'&gt;&lt;/asp:Label&gt;
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;asp:Label ID="Label7" runat="server" Text='&lt;%#Eval("Explanation")%&gt;'&gt;&lt;/asp:Label&gt;


            &lt;/asp:Panel&gt;
        &lt;/asp:Panel&gt;
        &lt;br /&gt;
        &lt;br /&gt;
                 &lt;/ItemTemplate&gt;
        &lt;/asp:TemplateField&gt;
    &lt;/Columns&gt;
&lt;/asp:GridView&gt;

    &lt;/div&gt;
    &lt;div id="tabs-3"&gt;
        Tab 3 Content
    &lt;/div&gt;
     &lt;div id="tabs-4"&gt;
        Tab 4 Content
    &lt;/div&gt;
     &lt;div id="tabs-5"&gt;
        Tab 5 Content
    &lt;/div&gt;
&lt;/div&gt;
&lt;input type="button" id="btnPrevious" value="Previous" style = "display:none"/&gt;
&lt;input type="button" id="btnNext" value="Next" /&gt;


        &lt;/div&gt;

&lt;/asp:Content&gt;</code></pre>
</div>
</div>
</p>