Text austauschen, fünf verschiedene Wege

Es ist eine häufige Anforderung in Webanwendungen: Sie klicken auf etwas und der Text des angeklickten Elements ändert sich. Vielleicht etwas Einfaches wie ein "Anzeigen"-Button, der zu "Ausblenden" wird, oder "Beschreibung erweitern" zu "Beschreibung einklappen". Das ist relativ einfach zu bewerkstelligen, aber es gibt verschiedene Aspekte zu beachten. Lassen Sie uns eine Reihe von Möglichkeiten abdecken.

jQuery-Weg (weniger Markup / mehr JavaScript)

Sie müssen den "Austausch"-Text irgendwo speichern. Ich würde sagen, in den meisten Fällen ist dies eine Design-/Ansicht-Angelegenheit, daher ist die Speicherung im Markup eine gute Idee. Wir verwenden das Beispiel eines Buttons, dessen Text zwischen "Ausblenden" und "Anzeigen" wechselt. Ein data-* Attribut ist ein durchaus geeigneter Ort, um den Austauschtext zu speichern. Das wird dann zu

<button data-text-swap="Show">Hide</button>

Es ist einfach, den Text auszutauschen, z.B.

var button = $("button");
button.text(button.data("text-swap"));

Aber wenn wir das täten, würden wir den Originaltext für immer verlieren. Wir müssen den Originaltext zuerst speichern. Ein weiteres data-* Attribut wird ausreichen.

var button = $("button");
button.data("text-original", button.text());
button.text(button.data("text-swap"));

Um das bei einem Klick-Ereignis zu tun, würden Sie

var button = $("button");
button.on("click", function() {
  button.data("text-original", button.text());
  button.text(button.data("text-swap"));
});

Aber das geht nur in eine Richtung. Um den "Austausch" abzuschließen, müssen wir den aktuellen Textwert des Buttons vergleichen, um zu sehen, ob er mit dem Austauschtext übereinstimmt oder nicht. Wenn ja, ändern Sie ihn zurück zum Original. Wenn nicht, zum Austauschtext. So sieht das komplett aus

$("button").on("click", function() {
  var el = $(this);
  if (el.text() == el.data("text-swap")) {
    el.text(el.data("text-original"));
  } else {
    el.data("text-original", el.text());
    el.text(el.data("text-swap"));
  }
});

jQuery-Weg (mehr Markup / weniger JavaScript)

Wenn wir bereit sind, den Wert data-text-original im ursprünglichen Markup zu setzen, können wir das JavaScript etwas vereinfachen. Wir können einen einzelnen ternären Operator verwenden, um zu prüfen, ob der Austausch dem Original entspricht, und die richtige Aktion basierend auf der Wahrhaftigkeit ausführen.

$("button").on("click", function() {
  var el = $(this);
  el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
});

Vanilla-JavaScript-Weg

Ich bin schuldig, zu viel jQuery für Dinge zu verwenden, die auch ohne es getan werden können. So würde die erste "weniger Markup"-Version in "rohem" JavaScript aussehen

var button = document.querySelectorAll("button")[0];
button.addEventListener('click', function() {
  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

CSS-Weg (mit jQuery, das Klassennamen ändert)

Da dies eine Ansichtssache ist und als "Zustand" betrachtet werden kann, ist eine gängige Idee, JavaScript nur zu verwenden, um Klassen zu ändern, die Zustände darstellen, und CSS zu definieren, was die visuelle Änderung tatsächlich ist.

Wir könnten die Klasse "on" verwenden, um den Austauschzustand darzustellen. Dann wendet diese Klasse ein Pseudoelement an, das das alte Wort überdeckt und es durch das Austauschwort ersetzt. Ich glaube nicht, dass tatsächliche Button-Elemente mit Standard-Browser-Styling gut mit Pseudoelementen zurechtkommen, also verwenden wir hier einen Anker.

a {
  position: relative;
}
a.on:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

Das ist zugegebenermaßen etwas seltsam. Ich denke, das ist fast schlimmer, als das Austauschwort in das JavaScript zu stecken. CSS ist eigentlich nicht für diese Art von Dingen gedacht und hat wahrscheinlich einige Barrierefreiheitsprobleme.

Das funktioniert auch, weil das Wort "Ausblenden" etwas kleiner ist als "Anzeigen". Wenn das Austauschwort größer wäre, würde das Original darunter hervorstechen. Sie könnten das vielleicht umgehen, indem Sie das Original mit inline-block versehen, den Überlauf ausblenden und das Original mit text-indent aus dem Feld schieben. Aber die Tatsache, dass das Ersetzungswort absolut positioniert ist, entfernt es aus dem Fluss, was ein Problem sein könnte, ganz zu schweigen davon, dass ein reales Design nicht immer so einfach ist wie flache Farbe auf flacher Farbe.

Nur-CSS-Weg

Aber hey, solange wir schon seltsam werden, könnten wir The Checkbox Hack verwenden, um den Text komplett über CSS austauschen zu lassen. Die Ersetzung erfolgt auf exakt dieselbe Weise, sie passiert nur, wenn eine unsichtbare Checkbox direkt vor dem Wort entweder :checked oder nicht ist. Das bedeutet, dass das Wort auch in einem Label stehen muss, das den Zustand der Checkbox über das for-Attribut umschalten kann.

<input id="example-checkbox" type="checkbox">
<label for="example" id="example">Show</label>

#example {
  position: relative;
}
#example-checkbox {
  display: none;
}
#example-checkbox:checked + #example:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

Demo aller fünf Wege

Check out this Pen!

Mehr?

Wie haben Sie das bisher gemacht? Wir haben nicht behandelt, den Austauschtext einfach in das JavaScript zu schreiben ... wie stehen Sie dazu?