Ich bemühe mich sehr, die Textfarbe zu ändern, nachdem ich darauf geklickt habe, aber keinen Erfolg erzielt habe. Es gibt sieben Bezeichnungen: - eine für die Frage, vier für die Antwortoptionen, eine für die richtige Antwort und die letzte für die Erklärung.Wie ändere ich die Farbe eines Textes, nachdem ich ihn mit jquery angeklickt habe?
Wenn Sie auf eine Option klicken, dann sollte sie mit der richtigen Antwort übereinstimmen und die Farbe des Textes ändern. Wenn die Antwort falsch ist, sollte die Farbe des Textes rot werden und wenn die Antwort richtig ist, wird sie grün.
Aber wenn ich auf irgendeine Option klicke, ändert sich nur die rote Farbe und wenn ich auf die Option klicke, die nach der richtigen Antwort korrekt ist, dann wird sie auch rot statt grün. Ich kann nicht herausfinden, warum? Schauen Sie sich meinen Code an. Zeig mir, wo ich Fehler mache und was die Lösung ist.
Die jquery für Farbwechsel zwischen Zeilennummer 48 und 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>
zeigen Ihnen die generierte HTML anstatt den serverseitigen Code? Wir können nicht wissen, wie es nur davon aussieht. – apokryfos
'.live()' ist veraltet verwenden Sie stattdessen '.on()'. –
Warum haben Sie mehrere dokumentfähige Event-Handler? '$ (Function() {' sollten Sie haben nur eine, wenn überhaupt möglich –