javascript - How do I change color of a text after clicking on it using jquery? -
i trying hard change text color after clicking on not getting success. there 7 labels :- 1 question, 4 answer options, 1 correct answer , last 1 explanation.
when click on 1 option should match correct answer , change color of text i.e. if answer wrong color of text should turn red , if answer right turn green.
but when click on option changing red color , when click on option correct according correct answer turn red instead of green. can't figure out why ? have @ code. show me making mistake , solution.
the jquery changing color between line number 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 variable var $anspanel = $(this).parent().find('.answerpanel'); //save ans panel 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 :-</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>
your code fine, don't have data in label tags. add text in 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 variable var $anspanel = $(this).parent().find('.answerpanel'); //save ans panel 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 :-</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>
Comments
Post a Comment