Dynamisch ändern Bilder basierte Inhalte von CSS-Klasse

Question

Ich versuche, einen möglicherweise langwierigen Prozess für eine neue Website zu automatisieren, die ich aufstelle. Grundsätzlich möchte ich ein Thumbnail-Bild auf einer Seite posten, aber ein Javascript bestimmen, welches Bild basierend auf dem Inhalt einer CSS-Klasse gepostet werden soll.

1) Alle Bilder würde ich auf den Server in einem Verzeichnis mit dem Namen „Logos“ vorgeladen werden müssen, würde

2) Die CSS-Klasse würde der Klassenname Bestandteil jeder Seite (in diesem Fall sein ist "title")

3) Sowohl der Bildname als auch der CSS-Klasseninhalt wären gleich - wenn also beispielsweise jemand auf einer Client-Seite landet, wo die css-Klasse "title" den Firmennamen enthalten würde: " Firma X "- es würde ein entsprechendes Firmenlogo mit dem Namen" Firma X.jpg "geben

Ich habe versucht, dies zu tun, indem Sie einen Bildplatzhalter auf kodieren die Seite, dann ein Javascript aufrufen, um die "img src" dieses Platzhalters zu ändern, basierend auf dem ID-Namen "compLogo". Ich war mit dem Javascript unter:

var link = getElementsByClassName("title"); 
images = "<img src=/logos/'>" 
document.getElementById("compLogo").innerHTML = 'images' + '[link]' + '.jpg'; 

jedoch das Skript nicht korrekt ist die Bildquelle zu schreiben so das Bild auf meiner Seite gebrochen zeigt nach oben. Ich bin natürlich sehr neu in JS, aber jede Hilfe würde sehr geschätzt werden.

Answer 1

Für alle anderen, die Hilfe brauchten, war ich in der Lage, eine Lösung zu finden.

var link = document.getElementsByClassName("title")[0].textContent; 
var imageurl = "<img src=\"http://testsite.com/logos/"; 
var suffix = ".jpg\">" 
document.getElementById("compLogo").innerHTML = imageurl + link + suffix; 

Das funktioniert perfekt. Wenn Sie in Ihrem HTML einen div container namens "compLogo" erstellen und einen Link zu diesem Javascript setzen, wird es die Bilddatei "mitnehmen", die den gleichen Namen wie der Textinhalt Ihres Klassennamens hat (in diesem Fall "title")) und platziere es entsprechend. Verwenden Sie CSS, um Ihre "compLogo" ID beliebig zu gestalten.

Der Grund, warum mein ursprünglicher Code nicht funktionierte, lag daran, dass ich nicht den Inhaltstyp identifizierte, auf den ich im Knoten zielen wollte. Durch Hinzufügen von "[0] .textContent" wurde das behoben. Ich habe fälschlicherweise auch das "Dokument" vor dem "getElementsByClassName" weggelassen.

Alternativ kann, wenn Sie den letzten Teil Ihrer URL als „Quelle“ Namen für die Bilder ausrichten möchten (was ist das, was ich am Ende mit), verwenden Sie den folgenden Code ein:

var pathArray = window.location.pathname.split('/'); 
var secondLevelLocation = pathArray[2]; 
var imageurl = "<img src=\"http://testsite.com/logos/"; 
var suffix = ".jpg\">" 
document.getElementById("compLogo").innerHTML = imageurl + secondLevelLocation + suffix; 

(a Danke an css-tricks.com für den window.location code)

Auf diese Weise, wenn Sie% Post-Name% Permalinks in Ihrer Wordpress-Website verwenden, wird der Code oben, den Namen des Posts/der Seite greifen url. Wenn Sie ein Bild mit einer Post-URL korrelieren müssen, benennen Sie einfach das Bild: 'your-post-url-name.jpg' und Sie können loslegen.

Ich war ehrlich gesagt nur auf der Suche nach dem, was ich falsch gemacht PHPglue und Sie waren überhaupt keine Hilfe. Ich habe klar gesagt, dass ich neu bei JS bin ... Nächstes Mal, wenn du nichts legitimes zu bieten hast, verschwende keine Zeit.