动态图片依赖于属性

Question

我的目标是有一个文件名的列表，并且在每个项目的旁边都会出现一个该文件扩展名的图片。

有一个很好的方法可以做到这一点：

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

这将检查'p‘元素的图标属性是否以.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)");
});

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

演示： 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，因为在超文本标记语言中你不应该添加随机的标签，所以超文本标记语言的创建者给了我们一个有效的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));
}

遗憾的是，目前这似乎不起作用，但天哪，这真是太棒了。