2

画像の場所に応じて、画像にクラスを追加または追加したい。

背景: 現在の会社で Twitter Bootstrap を使用するように書き直しています。現在のサイトでは、サル用の CMS (CKEditor を使用) を使用してテキストを追加し、画像をアップロードしています。彼らがアップロードするすべてのブートストラップクラス「img-responsive」を適用したいと思います。しかし、このクラスをサイトのコアに使用する画像 (つまり、ロゴ、ルック アンド フィールなど) に適用したくありません。画像は /images/ ディレクトリにアップロードされ、サイトの画像は /siteimages/ にあります。

前：

<img src="/images/gorilla.png" />
<img src="/images/monkey.jpg" />
<img src="/siteimages/logo.jpg" />
<img class=”drunk” src="/images/chimp.gif" />

後

<img class="img-responsive" src="/images/gorilla.png" />
<img class="img-responsive" src="/images/monkey.jpg" />
<img src="/siteimages/logo.jpg" />
<img class="drunk img-responsive" src="/images/chimp.gif" />

これは可能ですか？それとも私はこれを考えすぎていますか？ヘルプやリードをいただければ幸いです。

私が考えている安っぽい回避策は、「img-responsive」宣言をすべての「img」に適用し、サイト画像用に新しい「no-img-responsive」を作成することです。しかし、より洗練された実装が必要です。

ありがとう

4

3 に答える 3

2

ここでは、純粋な javascript を使用します。

<img src="/images/gorilla.png" />
<img src="/images/monkey.jpg" />
<img src="/siteimages/logo.jpg" />
<img class="drunk" src="/images/chimp.gif" />

<script>
var imgs = document.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++) {
    var img=imgs[i];
    if (img.src.indexOf('siteimages')==-1) {
        var classes=img.className;
        classes = (classes!='') ? classes+' img-responsive' : 'img-responsive';
        img.className=classes;
    }
}
</script>

img クラスが変更されました

<img src="/images/gorilla.png" class="img-responsive">
<img src="/images/monkey.jpg" class="img-responsive">
<img src="/siteimages/logo.jpg">
<img class="drunk img-responsive" src="/images/chimp.gif">
于 2013-09-19T19:32:19.453 に答える
1

おそらく、Jquery フィルター関数を使用して、対象の img の現在の「src」を返すか、この関数を条件 (if ...) で変更してみてください。

$('img[src^="*yourPath*"]')
        .not('*the other path*']')
        .addClass ('*img-responsive*');

アップロードされた画像の「src」条件をチェックします。

于 2013-09-19T19:32:55.630 に答える
0

JQuery を使用して、ドキュメントの準備ができている画像の src 属性を確認し、src が「/images」で始まるすべての画像に img-responsive を適用できます。

他の解決策はLessを使用することです

于 2013-09-19T19:25:20.183 に答える