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”，或者通过使用条件（如果 ...）修改此函数。

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

它将检查您上传的图像的“src”条件。

于 2013-09-19T19:32:55.630 回答
0

您可以使用 JQuery 检查文档准备好的图像 src 属性，并将 img-responsive 应用于其 src 以“/images”开头的所有图像

其他解决方案是使用Less

于 2013-09-19T19:25:20.183 回答