Suche einen Sorting-Button bzw. ein Sorting Icon

[Der Martin]

Hallo,

die entscheidende Anmerkung mal an den Anfang gezogen:

damit erzeuge ich sehr viel redundanten code

Genau das. Die CSS-Eigenschaften der beiden Klassen sind beinahe identisch, also warum nicht zusammenfassen und nur die Eigenschaften separat setzen, die tatsächlich verschieden sind?

.sort-by-asc, .sort-by-desc
{
  left: 3px;
  display: inline-block;
  width: 0;
  height: 0;
  border: solid 5px transparent;
  margin: 4px 4px 0 3px;
  background: transparent;
}

.sort-by-asc
{
  border-bottom: solid 7px #F80;
  border-top-width: 0;
}

.sort-by-desc
{
  border-top: solid 7px #F80;
  border-bottom-width: 0;
}

Damit wäre das CSS schon mal von Redundanzen befreit^[1]. Sehen wir uns nun noch das Javascript an. Die Sortierrichtung (vorwärts, rückwärts) legst du mit einer Zählvariable fest, die du dann auf gerade oder ungerade abfragst. Warum das? Es ist eine binäre Entscheidung - einer von zwei Zuständen. Dazu bietet sich der boolean-Typ an.

  sortDesc = false;

  sortSort() {
    this.sortDesc = !this.sortDesc;
    document.getElementById("sort1" ).className =
      ( this.sortDesc ?
        "sort-by-desc" :
        "sort-by-asc");
  }

Sieht doch gleich viel kompakter und übersichtlicher aus. Und gleich kommt wahrscheinlich noch der Gunnar mit seinem Mantra, doch bitte keine Maße in px anzugeben.

So long,
 Martin

---

1. Eine der beiden Klassen ist noch redundant; man könnte die Unterschiedung ebenso anhand von "Klasse gesetzt" bzw. "keine Klasse gesetzt" machen. Es sei denn, du hättest noch den dritten Zustand "Sortierung undefiniert". ↩︎