如何在使用jquery点击文本后更改文本的颜色

How do I change color of a text after clicking on it using jquery?

本文关键字：文本颜色 jquery 更新时间：2023-09-26

点击后，我正在努力更改文本颜色，但没有成功。有七个标签：一个用于问题，四个用于答案选项，一个用于正确答案，最后一个用于解释。

当点击任何一个选项时，它应该与正确的答案匹配，并更改文本的颜色，即如果答案错误，则文本的颜色应该变为红色，如果答案正确，则变为绿色。

但是，当我点击任何选项时，它只会变为红色，当我根据正确答案点击正确的选项时，也会变为绿色而不是红色。我不明白为什么？看看我的代码。告诉我哪里犯了错误，解决方法是什么。

更改颜色的jquery在行号48和82 之间

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Student_Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function () {
    //$("#Panel2").hide();
    document.getElementById('form1').onsubmit = function () {
        return false;
    }//Avoid Reloading
    $(".panelButton").click(function () {
        var $thisButton = $(this); //save button into a variable
        var $ansPanel = $(this).parent().find('.AnswerPanel'); //save ans panel into a variable
        if ($ansPanel.is(":hidden")) {
            $ansPanel.show();
        }
        else {
            $ansPanel.hide();
        }
        if ($thisButton.val() == "Show Answer") {
            $thisButton.val("Hide Answer");
        } else {
            $thisButton.val("Show Answer");
        }
    });
    $(".optionclass").click(function () {
        var $thisoption = $(this);
        var $corrans = $(".correctans");
        if ($thisoption.text() == $corrans.text()) {
            $thisoption.css("color", "green");
        }
        else {
            $thisoption.css("color", "red");
        }
    });
});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
        <li><a href="#tabs-4">Tab 4</a></li>
        <li><a href="#tabs-5">Tab 5</a></li>
    </ul>
    <div id="tabs-1">
        <asp:GridView ID="GridView1" 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> <asp:Label class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
            <br />
            <br />
            <span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
            <br />
            <br />
            <span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
            <br />
            <br />
            <span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
            <br />
            <br />
            &nbsp;&nbsp;
            <asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
            <br />
            <asp:Panel ID="answerspanel" 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">
            </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>
    </form>
</body>
</html>

您的代码很好，只是Label标记中没有任何数据。只需在标签标签中添加一些文本

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Student_Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
    <script type="text/javascript">
    var currentTab = 0;
    $(function () {
        $("#tabs").tabs({
            select: function (e, i) {
                currentTab = i.index;
            }
        });
    });
    $("#btnNext").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
        tabs.tabs('select', currentTab);
        $("#btnPrevious").show();
        if (currentTab == (c - 1)) {
            $("#btnNext").hide();
        } else {
            $("#btnNext").show();
        }
    });
    $("#btnPrevious").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
        tabs.tabs('select', currentTab);
        if (currentTab == 0) {
            $("#btnNext").show();
            $("#btnPrevious").hide();
        }
        if (currentTab < (c - 1)) {
            $("#btnNext").show();
        }
    });
    $(function () {
        //$("#Panel2").hide();
        document.getElementById('form1').onsubmit = function () {
            return false;
        }//Avoid Reloading
        $(".panelButton").click(function () {
            var $thisButton = $(this); //save button into a variable
            var $ansPanel = $(this).parent().find('.AnswerPanel'); //save ans panel into a variable
            if ($ansPanel.is(":hidden")) {
                $ansPanel.show();
            }
            else {
                $ansPanel.hide();
            }
            if ($thisButton.val() == "Show Answer") {
                $thisButton.val("Hide Answer");
            } else {
                $thisButton.val("Show Answer");
            }
        });
        $(".optionclass").click(function () {
            var $thisoption = $(this);
            var $corrans = $(".correctans");
            if ($thisoption.text() == $corrans.text()) {
                $thisoption.css("color", "green");
            }
            else {
                $thisoption.css("color", "red");
            }
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
        <li><a href="#tabs-4">Tab 4</a></li>
        <li><a href="#tabs-5">Tab 5</a></li>
    </ul>
    <div id="tabs-1">
        <asp:GridView ID="GridView1" 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> <asp:Label class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>'> CLICK</asp:Label>
            <br />
            <br />
            <span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'>CLICK</asp:Label>
            <br />
            <br />
            <span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'>CLICK</asp:Label>
            <br />
            <br />
            <span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'>CLICK</asp:Label>
            <br />
            <br />
            &nbsp;&nbsp;
            <asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
            <br />
            <asp:Panel ID="answerspanel" 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">
            </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>
    </form>
</body>
</html>