Javascript 根据图像位置目录追加CSS样式

Javascript 根据图像位置目录追加CSS样式,javascript,jquery,css,content-management-system,twitter-bootstrap-3,Javascript,Jquery,Css,Content Management System,Twitter Bootstrap 3,我想根据图像的位置向图像添加或附加一个类 背景:我正在重新编写我的公司当前使用推特引导。目前的网站使用CMS(使用CKEditor)为猴子添加文本和上传图像。我想将引导类“img responsive”应用于他们上传的所有内容。但我不想将此类应用于我用于站点核心的图像(即徽标、外观等)。他们的图像将上载到/images/目录,站点图像位于/sitemages/中 之前: <img src="/images/gorilla.png" /> <img src="/images/mo

我想根据图像的位置向图像添加或附加一个类

背景:我正在重新编写我的公司当前使用推特引导。目前的网站使用CMS(使用CKEditor)为猴子添加文本和上传图像。我想将引导类“img responsive”应用于他们上传的所有内容。但我不想将此类应用于我用于站点核心的图像(即徽标、外观等)。他们的图像将上载到/images/目录,站点图像位于/sitemages/中

之前:

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

之后


这可能吗?还是我想得太多了?任何帮助或线索都将不胜感激

我正在考虑的一个简单的解决方案是将“img响应”声明应用于所有“img”,并为站点图像创建一个新的“无img响应”。但我想要一个更圆滑的实现


谢谢

您可以使用JQuery检查documentready上的image src属性,并对src以“/images”开头的所有图像应用img


另一种解决方案是使用纯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>

var imgs=document.getElementsByTagName('img');
对于(var i=0;i
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">

也许您应该尝试使用Jquery filter函数返回目标img上的当前“src”,或者使用条件(if…)修改此函数


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

使用jQuery过滤功能时要小心:
$('img[src^=“*yourPath*”])
其中
^
表示
开头,
*
表示
包含
$
表示
结尾感谢您的提示和精确性。
<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">
$('img[src^="*yourPath*"]')
        .not('*the other path*']')
        .addClass ('*img-responsive*');