イメージベースのCSSベースのコンテンツを動的に変更します

Question

私は設定している新しいサイトに対して、時間のかかるプロセスを自動化しようとしています。基本的に、私がしたいのは、ページにサムネイル画像を投稿することですが、CSSクラスのコンテンツに基づいて投稿する画像を決定するjavascriptがあります。

1）私が持っているでしょう、画像のすべてのことになる「ロゴ」

2という名前のディレクトリにあるサーバーにあらかじめロードされた）CSSクラスは、すべてのページの一部になります（この例では、クラス名「タイトル」は「タイトル」）

3）イメージ名とcssクラスの内容は同じです。例として、cssクラス「title」に会社名が含まれているクライアントページに誰かがいる場合、会社X " - 名前が" Company X.jpg "の対応する会社ロゴが表示されます

私は、画像プレースホルダーをページを開き、javascriptを呼び出して、id name "compLogo"に基づいてプレースホルダの "img src"を変更します。スクリプトが正しくイメージが私のページに壊れアップ表示されるように、イメージソースを書いていないが

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

：私は下にJavaScriptを使用していました。私は明らかにJSにとって非常に新しいですが、どんな助けも大歓迎です。

Answer 1

ヘルプが必要な他の人には、私は解決策を見つけ出すことができました。

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; 

これは完全に機能します。 "compLogo"という名前のHTMLにdivコンテナを作成し、このjavascriptへのリンクを置くと、クラス名のテキストコンテンツと同じ名前の画像ファイルを "取得"します（この例では "title" ）それに応じて配置します。 cssを使って "compLogo"のスタイルを任意に設定します。

私の最初のコードがうまくいかなかったのは、ノードでターゲットにしようとしていたコンテンツの種類を特定できなかったためです。 "[0] .textContent"を追加することでそれを修正しました。私はまた、 "getElementsByClassName"の前に "ドキュメント"を誤って省略しました。

代わりに、あなたは、（私が使用して終了するものである）あなたのイメージのためのあなたの「ソース」名としてあなたのURLの最後の部分を対象と次のコードを使用する場合：

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

このように、あなたのワードプレスサイトで％post-name％permalinksを使用すると、上記のコードは投稿/ページの名前を取得しますurl。画像を投稿URLと関連付ける必要がある場合は、画像に「your-post-url-name.jpg」という名前を付けるだけでいいです。

私は正直なところ、私が間違ったPHPglueになった場所を探していました。あなたは全く助けになりませんでした。私は、私がJSの新人だと明確に述べました...次回は、あなたが提供する正当なものがなければ、誰の時間も無駄にしないでください。