Texte mit Javascript ändern

[jappi00]

Hallo,
ich habe ein kleines Problem:
Ich möchte ein Text mit mehreren Links ändern. Um es nochmal zu verdeutlichen:
http://www.apartmentoesterling.de
Ich möchte dort gerne das sich die Texte mit den Bildern ändern, unter anderem habe ich mehrere male versucht dieses umzusetzen bin aber nie sonderlich weit gekommen...
Vielen Dank schon mal im vorraus.
L.G.
Jappi00

 

[Tronjer]

Okay, ich erkläre dir, wie das in Programmierforen funktioniert. Der Fragesteller postet seinen eigenen Code, aus dem hervorgeht, dass er sich bereits intensiv mit der Materie beschäftigt hat. Ansonsten entsteht der Eindruck von Lernfaulheit, und es antworten höchstens Leute, die ihr Halbwissen zu Schau stellen wollen.

Da du die hier keinen eigenen Ansatz bringst, gebe ich dir nur etwas theoretische Hilfestellung. Der erste Schritt besteht darin, dass Anker-Tag mit dem javascript:swap('bild02','bilder/bild1.jpg') zu löschen. Das ist Ghetto-JavaScript aus den 90'er Jahren. Übergib den Bildnamen statt dessen per Data-Attribut.

<li data-image="bild1">Wohnzimmer</li>

Im zweiten Schritt schreibst ein Click-Event.

$('.pic').on('click', 'li', function() {
  // do something
});

Im dritten Schritt stellst du eine Referenz zwischen Bildnamen und Texten her. Dazu könnte man bsw. ein Array mit Objekten erstellen:

var obj = [
  {
    'img': 'bild1',
    'text': ['TV', 'Sofa', 'Sessel']
  },
  {
    'img': 'bild2',
    'text': ['Bett', 'usw.']
  }
];

Im vierten Schritt iterierst du über das Objekt. Dafür gibt es in jQuery die Funktion each() und hängst mit der Funktion append() Listenelemente mit den jeweiligen Texten an #Liste an.

Sollte dir das jetzt alles zu kompliziert und aufwendig erscheinen, denke daran, dass jeder, der dir dabei helfen könnte, den notwendigen Lernaufwand erbringen musste - und wir haben dafür viel Zeit investiert. Du hast also zwei Möglichkeiten: selbständig Grundlagenkenntnisse erwerben und anschließend deinen Code mit Bitte um Unterstützung zu publizieren oder das Ganze als Auftrag an die Jobbörse zu delegieren.

 

[Tronjer]

Alternativ zum Einfügen von Elementen ins DOM gäbe es natürlich auch die Möglichkeit, mehrere unsichtbare <ul> mit den Texten zu erstellen, und diese dann bedarfsweise einzublenden. Ist vielleicht etwas einfacher.

<li data-text=".wohnzimmer">Wohnzimmer</li>

$('.pic').on('click', 'li', function() {
  var container = $(this).data('text');
  $(container).show();
});

 

[jappi00]

Vielen Dank dir,
diese Theoretischen Ansätze werden mir bestimmt helfen.

Ich habe auch deine Kritik aufgenommen und gebe dir völlig recht aber mein Problem war einfach das ich keinen Ansatz zu der Thematik gefunden habe und so sehr viel Mist versucht habe, dies mag auch mit dem Ghetto Teil von dem Script zusammenhängen (habe vieles mit Tutorials aus dem Internet gemacht, da unser tolles Gymnasium nichts in diese Richtung anbietet) ... Ich werde versuchen beim nächsten Mal eigene Ansätze mitzubringen um euch/dir zu zeigen das ich mich mit der Thematik befasst habe! Für die Kritik auch noch mal vielen vielen Dank!
L.G.
Jappi00

 

[Tronjer]

Na schön, dann gebe ich dir mal einen abstrakten Ansatz, der sich auf deine Aufgabe übertragen lässt. Zum Transport von Informationen innerhalb HTML eignet sich das Data-Attribut. Im unteren Beispiel verwende ich es, um damit dynamisch dem Image-Tag ein Src-Attribut zuzuweisen und gleichzeitig die CSS-Klasse des Containers zu definieren, welcher eingeblendet werden soll.

<style>
    .image {display: none;}
    .image_1 {display:block;}
</style>

<ul class="navigation">
    <li data-image="image_1">Wohnzimmer</li>
    <li data-image="image_2">Schlafzimmer</li>
</ul>
<figure class="image-container">
    <img src="image_1.png" alt="image">
</figure>
<ul class="image image_1">
    <li>Property 1</li>
    <li>Property 2</li>
</ul>
<ul class="image image_2">
    <li>Property 3</li>
    <li>Property 4</li>
</ul>

$('.navigation').on('click', 'li', function() {
    var img = $(this).data('image'); // Das aktuelle Data-Attribut

    $('.image-container img').attr('src', img + '.png'); // img src Zuweisung
    $('.image').hide(); // Ausbleden aller <ul> mit der Klasse .image
    $('.' + img).show(); // Einblenden der gewünschten <ul>
});

 

[jappi00]

Vielen Dank dass du dir trotzdem die Mühe gemacht hast mir zu helfen,
ich denke ich habe es verstanden, habe trotzdem immense Probleme es umzusetzten... http://www.apartmentoesterling.de/Unbenannt-1.php
Es tut mir leid für die Mühe die du dir gemacht hast...
L.G. Jappi00

 

[nookie]

<ul class="image images/1">
    <li>Property 1</li>
    <li>Property 2</li>
</ul>
<ul class="image images/2">
    <li>Property 3</li>
    <li>Property 4</li>
</ul>

Fällt dir etwas auf? Entferne deine Slashes und ersetze Sie durch Unterstriche, wie es Tronjer gemacht hat. (Nicht nur an dieser Stelle) Natürlich nicht beim Pfad der Bildes, sonst würdest du in deinem Fall kein Bild angezeigt bekommen...

 

[jappi00]

Uncaught ReferenceError: $ is not definedUnbenannt-1.php:10 (anonymous function)
gibt er jetzt aus...
Ich glaube bei mir Hopfen und Malz verloren...

 

[Tronjer]

Du musst jQuery schon einbinden, bevor du die Funktion aufrufst. Da du auf deiner Indexseite gemacht hast, hatte ich das nicht extra erwähnt.