CODEWITHSUNDEEP
javascriptjqueryasp.netwebforms
Vasudha Dixit
Vasudha Dixit

Reputation: 377

How do I change color of a text when its clicked using jquery?

I am trying hard to change the color of a text when it is clicked but not getting success. There is one label for question, four labels for four options, one label for correct answer and one label for explanation.

What I am trying is when user click on any option then it should match with the correct answer 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 .

But when I click on any option it is turning to red color only . Correct option 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.

.aspx :- 

<%@ Page Title="" Language="C#" MasterPageFile="~/Student/StudentPage.master" AutoEventWireup="true" CodeFile="studpractice.aspx.cs" Inherits="Student_studpractice" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <script type="text/javascript">


        $(function () {

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

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

        });


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

        <asp:Panel ID="Panel1" runat="server">

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

            <asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">

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


            </asp:Panel>


        </asp:Panel>
        <br />
        <br />

                 </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
    </div>
    <div id="tabs-2">
       
        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>

        <asp:Panel ID="Panel1" runat="server">

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

            <asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">

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


            </asp:Panel>
        </asp:Panel>
        <br />
        <br />
                 </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

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


        </div>

</asp:Content>

Upvotes: 0

Views: 65

Answers (2)

sbonkosky
sbonkosky

Reputation: 2557

Change $(".correctans") to $(".correctans")[0] or $(".correctans").first() to get the single correctans element instead of a collection.

EDIT:

Since you have multiple questions and answers on the page, use this to get the correctans for the question they're answering:

var $corrans = $(this).parent().find('.correctans:first');

Upvotes: 0

void
void

Reputation: 36703

So what wrong you are doing is you are selecting all .correctans and what you should do is select the .correctans specific to that question only.

Upvotes: 2

Related Questions