使用jquery点击文本后，如何更改文本的颜色？
[英]How do I change color of a text after clicking on it using jquery?
问题描述
I am trying hard to change the text color after clicking on it but not getting success. 
点击它后我努力改变文字颜色，但没有取得成功。 There are seven labels :- one for question, four for answer options, one for correct answer and last one for explanation. 有七个标签： - 一个用于提问，四个用于答案选项，一个用于正确答案，最后一个用于解释。
When click on any one option then it should match with the correct answer and change the color of the text ie if the answer is wrong then color of the text should turn to red and if the answer is right then turn green. 当点击任何一个选项时，它应该与正确答案匹配并更改文本的颜色，即如果答案是错误的，那么文本的颜色应该变为红色，如果答案是正确的，则变为绿色。
But when I click on any option then it is changing to red color only and When I click on the option which is correct according to the correct answer then also it turn to red instead of green. 但是当我点击任何选项时，它只会变为红色，当我按照正确的答案点击正确的选项时，它也会变成红色而不是绿色。 I can't figure out why ? 我想不通为什么？ Have a look at my code. 看看我的代码。 Show me where I am making mistake and what is the solution. 告诉我我在哪里犯错，解决方案是什么。
The jquery for changing color is between line number 48 and 82 用于改变颜色的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 /> <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>
1 个解决方案
解决方案1
0 2016-04-19 08:06:25
Your code is fine, you just don't have any data in your Label tags. 您的代码很好，您的Label标签中没有任何数据。 Just add some text in your label tags. 只需在标签标签中添加一些文字即可。
<%@ 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 /> <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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何通过单击连续更改跨度的颜色和文本？ - How do I change color and text of a span continuously by clicking on it?
单击按钮后如何更改按钮的背景颜色？ - How do I change the background color of button after clicking on it?
如何在单击按钮后使文本更改颜色并在几秒钟不单击后更改颜色？ - How can I make text change color after button click and change back the color after a couple of seconds of no clicking?
使用jQuery单击文本时如何更改其颜色？ - How do I change color of a text when its clicked using jquery?
我想使用javascript单击后更改背景颜色 - I want to change background color after clicking using javascript
如何在单击时更改按钮颜色，glyphicon和文本？ - How can I change button color,glyphicon and text on clicking it?
如何使用jQuery更改文本颜色 - how to change the text color using using jquery
如何使用三元运算符更改 vue 中文本的颜色？ - How do I change the color of a text in vue using ternary Operator?
如何使用jQuery或JavaScript更改文本颜色 - how to change the text color using jquery or javascript
我要在单击后更改背景颜色吗？ - i want to change the background color after clicking?
相关标签