Как я могу получить соседа элемента html в javascript?
Пример html:
<div class = "container" id = "neighbor-color-div">
<button id = "change-neighbour-color" onclick = "change_neighbor_color()">Change my
neighbour color!</button>
<button id = "neighbour">Click the other button!</button>
</div>
<script src = "./main.js" defer></script>
Пример main.js:
function change_neighbor_color() {
...
}
Я не знаю, как это сделать, но после того, как я нажму кнопку «Изменить цвет соседа», цвет текста другой кнопки должен измениться на синий.
Спасибо за помощь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Общий способ
Вы можете передать при вызове функции ссылку на кнопку, которая вызывает функцию с помощью this
<button id = "change-neighbour-color" onclick = "change_neighbor_color(this)">
Затем у вас есть ссылка на вызываемый элемент кнопки
e.target;
- Тогда получите все свои кнопки с
querySelectorAll() - прокрутите все кнопки и проверьте, по какому индексу находится кнопка, вызвавшая функцию, сравнив ее идентификатор.
- Лучше всего, если ваши кнопки, которые вы хотите использовать, имеют одинаковые имена классов.
Тогда вашим соседом будет кнопка с индексом +1
function change_neighbor_color(e) {
let index;
let nodes = document.querySelectorAll(".btn");
nodes.forEach((n, ind) => {
if (n.id === e.id){
index = ind;
}
})
if (index !== undefined && index !== null){
nodes[index+1].style.color = "blue";
}else{
console.info("NO NEIGHBOUR FOUND");
}
} <div class = "container" id = "neighbor-color-div">
<button id = "change-neighbour-color" class = "btn" onclick = "change_neighbor_color(this)">Change my
neighbour color!</button>
<button id = "neighbour" class = "btn">Click the other button!</button>
</div>
<script src = "./main.js" defer></script>Не общий способ
Получите доступ к элементу neighbour по его id и задайте ему синий цвет с помощью .style.color
document.getElementById("neighbour").style.color = "blue";
function change_neighbor_color() {
document.getElementById("neighbour").style.color = "blue";
}<div class = "container" id = "neighbor-color-div">
<button id = "change-neighbour-color" onclick = "change_neighbor_color()">Change my
neighbour color!</button>
<button id = "neighbour">Click the other button!</button>
</div>
<script src = "./main.js" defer></script>Хорошее имя @JavaScript. Для более общего способа вы можете использовать имена классов и querySelectorAll, а затем соседние нужные элементы находятся в индексе [elementIndex -1] [elementIndex +1]
Помните о втором предложении с использованием setAttribute(), которое удалит все существующие встроенные стили. Если вам также нужны стили в разметке, их комбинация будет более стабильной.
Как бы вы их объединили?
Сначала вы назначаете свойство, а затем устанавливаете атрибут, используя style.cssText. Кроме того, вы можете просто добавить класс, что в настоящее время является обычной практикой.
но разве первое решение не является правильным способом сделать это в oneliner?
Я добавил общее решение. Там я передаю ссылку на вызываемую кнопку.
function change_neighbor_color() {
document.getElementById('neighbour').style.color= 'blue';
}
Почему вы меняете его на красный?
И запрашивается цвет текста, а не цвет фона
исправил ответ, спасибо
Хотя это работает, я совершенно уверен, что хотелось более общего подхода. Как я могу получить соседа элемента html в javascript?