Einzelne Worte ein- und ausblenden

html.de-Forum JavaScript
1

Hallo,

für einen Lerntext möchte ich einzelne Worte per JavaScript in einem Fließtext ein- und wieder ausblenden können. Über Google habe ich leider keine Lösung gefunden. Ich habe folgende Vorstellungen:

  1. Die Worte sollen innerhalb eines kurzen Elements stehen, zum Beispiel des b-Elements, damit der HTML-Quelltext möglichst schnell und unkompliziert erstellt werden kann.

  2. Beim Öffnen der Seite sollen die Worte ausgeblendet sein und durch Platzhalter der Schriftart „Font-Awesome“ ersetzt werden. Ersatzweise gingen natürlich auch normale Zeichen.

Falls der Besucher JavaScript blockiert hat, sollen die Worte beim Öffnen der Seite eingeblendet sein.

  1. Durch Klicken per Maus (oder Finger auf einem Touchpad) soll der Platzhalter durch das Wort ersetzt werden. Durch erneutes Klicken soll wieder der Platzhalter eingeblendet und das Wort ausgeblendet werden.

  2. Das Ein- und Ausblenden der einzelnen Worte soll unabhängig voneinander funktionieren. So können die Besucher die Worte, bei denen sie noch unsicher sind wieder ausblenden und die sicheren eingeblendet lassen. Wenn ein Wort eingeblendet wird soll also kein anderes ausgeblendet werden und umgekehrt.

  3. Es wäre schön, wenn sich am Anfang und Ende des Textes Buttons einfügen ließen, mit denen sich im Wechsel auf einen Klick alle Worte ein- und wieder ausblenden ließen, damit die Besucher sich beim ersten Lesen bzw. Lernen zunächst den gesamten Text durchlesen könnten.

Meine Testseite dazu befindet sich unter

http://foreninfo.bplaced.net/seiten_probleme/2014_02_03_worte_ein_und_ausblenden.html

Kennt jemand so ein JavaScript?

Gruss

MrMurphy

2

Das ist ein mehrstufige Aufgabe, aber wo genau liegt jetzt das Problem?

3

Hallo,

das ich in den Suchmaschinen keine Lösung dafür finde. Da ich JavaScript nicht kann mus sich eine fertige Lösung finden. Vielleicht kennt ja jemand eine.

Gruss

MrMurphy

4

Ist aber doch eigentlich banal. Konzeptionell betrachtet hieße das: Ersetze beim Laden der Seite alle Wörter innerhalb der Inline-Tags durch einen Platzhalter und speichere diese Wörter irgendwo, damit sie beim Klick auf den Platzhalter geswitched werden können. Wenn der User JS nicht enabled hat, findet auch kein Replace statt.

Ich habe das nachfolgend so gemacht, dass beim Laden für jedes ein Data-Attribut erzeugt und darin das jeweilige Wort abgelegt wird.

HTML:
[HTML]

That's a nice try to hide text!

[/HTML]

jQuery:

[CODE]var placeHolder = ‚Platzhaltertext‘;

$(‚.replace‘).each(function() {
var hiddenWord = $(this).text();
$(this)
.attr(‚data-hidden-word‘, hiddenWord)
.text(placeHolder);
});

$(‚.replace‘).on(‚click‘, function() {
var switchWord = $(this).text() == placeHolder ? $(this).data(‚hidden-word‘) : placeHolder;
$(this).text(switchWord);
});[/CODE]

Den Button aus Schritt 5 bekommst du hin, oder?