Der Martin: Suche einen Sorting-Button bzw. ein Sorting Icon

Beitrag lesen

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

--
Ich stamme aus Ironien, einem Land am sarkastischen Ozean.

  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". ↩︎

0 71

Suche einen Sorting-Button bzw. ein Sorting Icon

hmm
  • css
  • html
  1. 2
    Gunnar Bittersmann
    1. 0
      marctrix
  2. 1
    JürgenB
    1. 0
      marctrix
      1. 0
        JürgenB
        • barrierefreiheit
        • css
        • html
        1. 0
          JürgenB
        2. 0
          marctrix
          1. 0
            JürgenB
            1. 0
              JürgenB
              1. 0
                Matthias Apsel
                1. 0
                  JürgenB
                  1. 0
                    Matthias Apsel
                    1. 0
                      JürgenB
                      1. 0
                        Matthias Apsel
            2. 0
              marctrix
              1. 0
                marctrix
                1. 0
                  JürgenB
                  1. 0
                    marctrix
                    1. 0
                      JürgenB
                      1. 0
                        marctrix
                        1. 0
                          JürgenB
                          1. 0
                            marctrix
                            1. 0
                              JürgenB
                              1. 0
                                marctrix
                                1. 0
                                  JürgenB
                                  1. 0
                                    marctrix
                                    1. 0
                                      JürgenB
                                      1. 0
                                        marctrix
                                        1. 0
                                          JürgenB
                                      2. 0
                                        Matthias Apsel
                                        1. 0
                                          JürgenB
                                          1. 0
                                            Matthias Apsel
                                            1. 0
                                              JürgenB
                                              1. 0
                                                Matthias Apsel
                              2. 1
                                Gunnar Bittersmann
                                1. 1
                                  JürgenB
  3. 1
    Gunnar Bittersmann
    • barrierefreiheit
    • css
    • html
    1. 0
      JürgenB
      1. 0
        Gunnar Bittersmann
        1. 1
          JürgenB
          1. 0
            marctrix
  4. 0
    hmm
    1. 0
      hmm
      1. 0
        Der Martin
        • css
        • html
        • javascript
        1. 0
          Gunnar Bittersmann
          • javascript
        2. 0
          marctrix
      2. 1
        Gunnar Bittersmann
        • html
      3. 0
        JürgenB
  5. 0
    DevMat
    1. 1
      Gunnar Bittersmann
    2. 1
      Der Martin
  6. 0
    hmm
  7. 0

    Jetzt brauch ich außerdem noch eine Sortierungsidee, weil mein REST nur vorsortiert

    hmm
    1. 0
      dedlfix
      1. 0
        hmm
        1. 0
          dedlfix
          1. 0
            hmm
            1. 0
              Gunnar Bittersmann
              • javascript
              1. 0
                hmm
                1. 2
                  JürgenB
                  1. 0
                    hmm
                    1. 1
                      JürgenB
                      1. 1
                        Gunnar Bittersmann
                2. 1
                  Rolf B
                  1. 0
                    hmm
                  2. 0
                    Gunnar Bittersmann
                    1. 0
                      Rolf B
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Mitleser
                        2. 0
                          Rolf B