根据内容将图像附加到链接答案

【问题标题】：Appending an image to a link based on its content根据内容将图像附加到链接
【发布时间】：2010-06-20 15:43:59
【问题描述】：

我有一个系统可以生成指向应用程序不同部分的链接。我需要根据其上下文在链接旁边附加一个图像。在 CSS 中我会这样做：

a {    
 color:#FF6600;
 padding-right:50px;
 background-image: url('images/system.png');
 background-position: right;
 background-repeat: no-repeat;

}

上面的 CSS 规则的问题是所有链接都得到相同的图像。如果一个链接有 class="system" 那么 system.png 必须附加，如果它有 class="actions" 必须附加 action.png .我猜我可以使用 jQuery 来做到这一点，任何指针？

【问题讨论】：

标签： css image

【解决方案1】：

a {
    color: #f60;
    padding-right: 50px;
    background-position: right;
    background-repeat: no-repeat;
}

a.system {
    background-image: url("images/system.png");
}

a.actions {
    background-image: url("images/actions.png");
}

【讨论】：

【解决方案2】：

使用

a.system{
background-image: url('images/system.png');
.....
}
a.actions{
background-image: url('images/action.png');
....
}

【讨论】：

【解决方案3】：

为链接添加 ID。使用 jQuery 选择每个 ID，并更改其 background-image 属性以匹配您的需要。

示例：

为<a id="house" src="house.html">my house</a>

执行：

$("#house").attr("background-image", "house.png");。

当然，您可以以编程方式遍历所有链接，只要它们的 ID 提示您需要设置的图像。

【讨论】：

使用 jQuery 做这个简单的事情是大材小用
取决于他有多少这样的链接。对于2-3，我完全同意。对于整个列表，不建议使用手动方法，也不可维护。
$("#house").attr("background-image", "house.png"); 如何在大规模上更实用？如果您要离开 ID，则需要为每个链接执行此操作，因为使用 css a.system { } 设置特定图像将对类名称 system 下的 100 个链接起作用。