Ich versuche, ein wenig JQuery/Javascript zu verwenden, um zwischen den Symbolen zu wechseln, die ich für die Sortierung der Tabelle verwende. Ich kann alle i-Elemente ausblenden, habe aber ein paar Probleme, die speziell auf die Klasse zum Ausblenden/Anzeigen gerichtet sind.Verwenden von JQuery zum Wechseln zwischen Symbolklassen
Zum Beispiel sind diese meine Tabellenüberschriften in HTML
<th>Order No <i id='col1' class='fa fa-sort'></i></th>
<th>Cust Name <i id='col2' class='fa fa-sort'></i></th>
<th>Cust ID <i id='col3' class='fa fa-sort'></i></th>
<th>Doc Date <i id='col4' class='fa fa-sort'></i></th>
<th>Upload Date <i id='col5' class='fa fa-sort'></i></th>
<th>Path</th>
Was ich speziell tun möchte, ist Ziel der Element-ID zB col1 etc. Und dann schalten nur den Klassennamen auf Klick zwischen diesen 3 Klassen abhängig davon, welche Klasse gerade angezeigt wird.
Dies ist ein typisches Beispiel:
<th>Order No <i id='col1' class='fa fa-sort'></i></th>
I wird in der Regel zwischen den folgenden drei Klassen Schalt werden.
- fa fa-sort
- fa fa-sort-asc
- fa fa-Art-desc
SCRIPT Alle Tutorials ich gefunden habe, scheinen nur das Element id Ziel . Ich habe so etwas versucht, aber es funktioniert nicht. Jede Anleitung dazu wäre sehr zu begrüßen.
Nachdem ich den Vorschlag von G gesehen habe, habe ich den Code geändert, aber es scheint nicht zu funktionieren. Ich füge den Code der Testseite hinzu, entschuldige bitte jegliche Formatierungsfehler.
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<!-- CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style>
table
{
width: 90%;
margin: auto;margin-top: 20px;
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #a0a0a0;
border-radius: 25px;
background-color: transparent;
}
.table
{
width: 90%;
margin-right: 5%;
margin-bottom: 20px;
margin-left: 5%;
}
th
{
padding: 10px;color: #fff;
background-color: #003466;
}
#col1, #col2, #col3, #col4, #col5
{
cursor:pointer;
}
tr
{
padding: 10px;
}
tr:nth-child(odd)
{
background-color: #fff;
}
tr:nth-child(even)
{
background-color: #efefef;
}
td
{
padding: 10px; text-align: center;
}
</style>
<script>
$("#col1").click(function() {
if($(this).hasClass('fa-sort')){
$(this).removeClass('fa-sort').addClass('fa-sort-asc');
return;
}
if($(this).hasClass('fa-sort-asc')){
$(this).removeClass('fa-sort-asc').addClass('fa-sort-desc');
return;
}
if($(this).hasClass('fa-sort-desc')){
$(this).removeClass('fa-sort-desc').addClass('fa-sort');
return;
}
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Order No <i id='col1' class='fa fa-sort'></i></th>
<th>Cust Name <i id='col2' class='fa fa-sort'></i></th>
<th>Cust ID <i id='col3' class='fa fa-sort'></i></th>
<th>Doc Date <i id='col4' class='fa fa-sort'></i></th>
<th>Upload Date <i id='col5' class='fa fa-sort'></i></th>
<th>Path</th>
</tr>
</thead>
</table>
</body>
</html>
Wenn ich Sie richtig verstanden, dann Sie eine Klasse auf Ihren col1-3 abhängig von der Klasse aready angebracht anhängen möchten. Sie könnten die Klasse .class() von jQuery verwenden, um die Elemente mit einer bestimmten Klasse und dann die Klassenadd_Class() oder removeClass() zu finden. – Otterbein
Hallo, danke für deine Antwort. Du hast recht, genau das habe ich mir erhofft. Aber als ich das Skript eingefügt habe, hat der Code immer noch nicht auf mich abgefeuert. Ich hatte gerade noch ein Update, vielleicht warst du das auch. Ich habe den Thread geändert, um die gesamte Seite anzuzeigen. Ich habe einen Test ausgeführt, um einfach die i-Elemente zu verstecken, um zu überprüfen, alles in Ordnung war und dass ich keinen Fehler gemacht hatte und es hat gut funktioniert. – Nick
@galeaspablo gab Ihnen den richtigen Code. Er erwähnt auch, eine separate Funktion zu schreiben. Dies wäre die beste und sauberste Lösung. Sie könnten Ihre aktuelle Klasse einfach weitergeben und die nächste Klasse zurückgeben. – Otterbein