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

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

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

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

改变颜色的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="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">
            </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>

最佳答案

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

<%@ 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="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">
            </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>

关于javascript - 如何使用 jquery 单击文本后更改文本的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36712041/

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

上一篇：javascript - IDEA + Grunt - 如何实时编辑 JavaScript

下一篇：javascript - 如何从cjs chrome扩展读取js脚本文件