javascript - 使用 jquery 单击时如何更改文本的颜色？

Question

我正在努力改变点击时文本的颜色，但没有成功。 一个标签用于问题，四个标签用于四个选项，一个标签用于正确答案，一个标签用于解释 >.

我正在尝试的是，当用户单击任何选项时，它应该与正确答案匹配，并更改该选项文本的颜色，即当答案时正确的话文本颜色应变为绿色，否则颜色应变为红色。

但是当我单击任何选项时，它只会变成红色。正确的 option 应该变成绿色，但现在变成了红色。我不明白为什么？ 看看我的代码。告诉我哪里出错了以及解决方案是什么。

.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>

Answer 1

所以你做的错误是你选择了所有. Correctans，而你应该做的是仅选择特定于该问题的. Correctans。