Question

点击它后我努力改变文字颜色，但没有取得成功。有七个标签： - 一个用于提问，四个用于答案选项，一个用于正确答案，最后一个用于解释。

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

但是当我点击任何选项时它只会变成红色而当我根据正确的答案点击正确的选项时，它也会变成红色而不是绿色。我无法弄清楚为什么？看看我的代码。告诉我我犯错误的地方和解决方案。

用于更改颜色的jquery位于第48行和第82行之间

＆＃13;

<%@ 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>

＆＃13;

Answer 1

您的代码很好，您的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="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>

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

1 个答案: