Изменить цвет дочерних элементов с помощью события onclick родительского элемента
У меня есть 3 тега <a>, каждый из которых имеет класс categoryItem, завернутый внутри своих соответствующих родителей, каждый из которых имеет класс categoryLists.
Я хочу, чтобы тег a был красного цвета при нажатии li. Например: если щелкнуть по первому li, он должен окрасить только первый тег a, а не все теги a.
Я пробовал использовать цикл for, но он, похоже, не работает, поскольку он окрашивает все элементы с тегами a.
function changeColor() {
let catItem = document.getElementsByClassName('categoryItem');
for(let i = 0; i < catItem.length; i++) {
catItem[i].style.setProperty('color', 'red', 'important');
}
}.categoryItem {
text-decoration: none;
color: green;
}<li class = "categoryList" onclick = "changeColor()">First
<a href = "#" class = "categoryItem">First Link</a>
</li>
<li class = "categoryList" onclick = "changeColor()">Second
<a href = "#" class = "categoryItem">Second Link</a>
</li>
<li class = "categoryList" onclick = "changeColor()">Third
<a href = "#" class = "categoryItem">Third Link</a>
</li>@PatrickEvans Это просто для проверки.
Ну, даже в качестве примера вам нужно иметь такой html, который вам понадобится. Поскольку ваша проблема описывает ситуацию родительского / дочернего элемента, и ни один из элементов не является ни родителем, ни дочерним элементом друг друга.
@PatrickEvans Забыл обернуть тег a внутри тега li: P! Только что отредактировал
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуй это. Идентификаторы не нужны:
function changeColor(el) {
el.querySelector('a.categoryItem').style.setProperty('color', 'red', 'important');
}.categoryItem {
text-decoration: none;
color: green;
}<ul>
<li class = "categoryList" onclick = "changeColor(this)">First
<a href = "#" class = "categoryItem">First Link</a>
</li>
<li class = "categoryList" onclick = "changeColor(this)">Second
<a href = "#" class = "categoryItem">Second Link</a>
</li>
<li class = "categoryList" onclick = "changeColor(this)">Third
<a href = "#" class = "categoryItem">Third Link</a>
</li>
</ul>Если только вы скажете мне добавлять эти идентификаторы динамически.
Теперь это динамический @Sanjay. Я отредактировал ответ на основе вашего редактирования вопроса.
Попался! Большое спасибо!
Передайте this вашему встроенному вызову функции js, чтобы ваша функция имела ссылку на элемент, который был нажат.
onclick = "changeColor(this)"
Затем используйте querySelector() или аналогичный метод DOM, чтобы получить дочерний тег привязки этого элемента.
var item = listElement.querySelector('a.categoryItem');
И оттуда выполните необходимые манипуляции, обратите внимание на использование классов css вместо прямых манипуляций со стилем.
item.classList.remove('active')
Демо
function changeColor(listElement) {
//clear the active class from current active
var active = listElement.parentElement.querySelector('a.categoryItem.active');
if (active){
active.classList.remove('active');
}
//set the class of the newly clicked element.
var item = listElement.querySelector('a.categoryItem');
if (item) {
item.classList.add('active');
}
}.categoryItem {
text-decoration: none;
color: green;
}
.categoryItem.active {
color: red;
}<ul>
<li class = "categoryList" onclick = "changeColor(this)">First
<a href = "#" class = "categoryItem">First Link</a>
</li>
<li class = "categoryList" onclick = "changeColor(this)">Second
<a href = "#" class = "categoryItem">Second Link</a>
</li>
<li class = "categoryList" onclick = "changeColor(this)">Third
<a href = "#" class = "categoryItem">Third Link</a>
</li>
</ul>Потрясающие. Понятно
Ваши теги привязки не являются дочерними элементами тегов li, также ваш html недействителен, поскольку li должны быть дочерними элементами ol или ul. Это может вызвать проблемы в будущем, если браузеры решат внести правильные исправления в HTML.