动态图片取决于属性

Question

我的目标是拥有一个文件名列表，并且每个项目附近都会显示该文件扩展名的图片。

有一种很好的方法：

p[icon^=".gif"]
{
background: url(images/gif.png) no-repeat center left)
}

检查'p'元素的icon属性是否以.gif结尾。如果是的话， 它将给定的样式应用于该元素。

但不是定义每种文件类型，我希望它是通用的，因为我有一个带有这种格式图标的文件夹：{file-extansion} .png

如果没有匹配的文件与给定的扩展或没有文件扩展，将有一个默认路径“default.png”。

有选择这样做或部分吗？如果不是，你建议我这样做的方式是什么？

顺便说一句，我不是css / javascript专家，所以请给出足够的详细信息，以便我能理解你的答案。

Answer 1

您可以使用jQuery library：

<强> HTML

<p data-ext=".gif">Text</p>
<p data-ext=".png">Text</p>
<p data-ext=".jpg">Text</p>

<强> CSS

p {
    background-repeat: no-repeat;
    background-position: 0 50%;
}

<强>的JavaScript

$("p[data-ext]").each(function() {
    var ext = $(this).data("ext").substring(1);
    $(this).css("background-image", "url(images/" + ext + ".png)");
});

它的工作原理是您为每个p（或其他）标记添加data-ext attribute。 jQuery选择具有p属性的所有data-ext标记，然后获取属性值，并更改每个元素的background-image。

DEMO： http://jsfiddle.net/AEsx4/

Answer 2

使用纯CSS，您无法动态引用URL中的属性，但可以将其作为内容。以下是使用纯CSS的一些蹩脚的解决方法，最后是一种一厢情愿的方法:(

使用班级

<div class="jpg">
</div>


/* css */
.jpg {
   background: url("/img/jpg.jpg");
}

这很好用，但每个扩展名需要一个班级。

使用属性选择器

<div data-ext="jpg"></div>

div[data-ext=jpg] {
   background: url(/img/jpg.jpg);
}

有关此方法的更多信息，请参阅： http://css-tricks.com/attribute-selectors/

我使用了data-ext，因为在HTML中你并不是真的应该添加随机标签，因此HTML创建者给了我们data-*这是有效的HTML5，我们可以随心所欲地做任何事情。无论哪种方式，您都需要为每个扩展创建一个新的CSS选择器。不好。

最接近纯粹的css

<div data-ext="jpg"></div>

div:after {
   content: attr(data-ext);
}

您将在div旁边看到扩展名。这几乎可行，但还不够好。

有关CSS函数的更多信息：http://www.suburban-glory.com/blog?page=130

你真正想要的是什么

<div data-ext="jpg"></div>

div:after {
   content: url("/img/jpg." attr(data-ext));
}

可悲的是，目前这似乎不起作用，但男孩会很棒。