Добавление изображения к ссылке на основе его содержимого

Question

У меня есть система, которая генерирует ссылки на различные части приложения. Мне нужно добавить изображение рядом со ссылкой на основе ее контекста. В 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 для этого, какие-нибудь указатели?

Answer 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");
}

Answer 2

использование

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

Answer 3

Добавить идентификаторы к ссылке. Используйте jQuery для выбора каждого идентификатора и измените его атрибут background-image в соответствии с тем, что вам нужно.

пример:

для <a id="house" src="house.html">my house</a>

выполнить

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

Конечно, вы можете программно перебирать все ссылки, если их идентификатор указывает на изображение, которое вам нужно установить.