Изменить фон в соответствии с последним словом в тексте гиперссылки

Question

Допустим, у вас есть изображение, представляющее гиперссылку, как (2-е редактирование, чтобы показать больше):

<a href="https://companysite.com/strawberry-red"><img 
src="https://upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif"></a>

Мне нужен скрипт, который бы переключал изображение в соответствии с последним словом в гиперссылка.

Пример: клубника- красный , малина- синий , яблоко- зеленый

возможно CSS: . красный ,. синий ,. зеленый

Это также можно сделать, сделав пустое поле и просто определив фоновое изображение с помощью скрипт, поддерживаемый CSS для URL.

Это кажется относительно простым. Просто не нашел ресурс и чувствую, что он должен быть там для людей в будущем.

Это похоже на , как удалить последнее слово в строке, используя JavaScript, всего несколько шагов.

РЕДАКТИРОВАТЬ: Хотя я не видел spacer.gif в течение многих лет, это работает. Теперь background-image или background-color можно определить как CSS. Это изображение может быть ненужным. Теперь как будто его даже нет!

Answer 1

Вы можете добавить l oop ко всем тегам <a /> (или выборочно, добавив предварительно определенное имя класса) и получить последнее слово из атрибута href.

Затем добавить последнее слово в classList первого дочернего элемента. Это всего лишь пример, так как я не уверен, как бы вы «переключили» содержащее изображение.

Array.from(document.querySelectorAll('a')).map(function(element) {
  var hrefWords = element.getAttribute('href').split('-');
  var lastWord = hrefWords.pop();
  
  element.firstChild.classList.add(lastWord);
});

.red {
  border: 1px solid red;
}

.blue {
  border: 1px solid blue;
}

.green {
  border: 1px solid green;
}

<a href="example.com/strawberry-red"><img src="https://i.picsum.photos/id/143/200/300.jpg"></a>
<a href="example.com/raspberry-blue"><img src="https://i.picsum.photos/id/143/200/300.jpg"></a>
<a href="example.com/apple-green"><img src="https://i.picsum.photos/id/143/200/300.jpg"></a>
<a href="example.com/strawberry-red"><img src="https://i.picsum.photos/id/143/200/300.jpg"></a>
<a href="example.com/raspberry-blue"><img src="https://i.picsum.photos/id/143/200/300.jpg"></a>
<a href="example.com/apple-green"><img src="https://i.picsum.photos/id/143/200/300.jpg"></a>

Answer 2

Чтобы установить фон на основе последней части значения атрибута класса элемента, вы можете использовать селектор атрибута [attr$=value] CSS :

Представляет элементы с имя атрибута attr , к значению которого добавляется суффикс (сопровождается) value .

Адаптируя разметку из вашего примера, вы можете подойти к ней следующим образом:

a.color[href$="red"] {
  background-color: red;
}
a.color[href$="green"] {
  background-color: green;
}
a.color[href$="blue"] {
  background-color: blue;
}

a {
  color: white;
  padding: 1rem;
}

<a class="color" href="https://companysite.com/strawberry-red">Red</a>
<a class="color" href="https://companysite.com/apple-green">Green</a>
<a class="color" href="https://companysite.com/raspberry-blue">Blue</a>

Вы также можете установить фоновое изображение с помощью этого подхода вместо просто цвета.