Как перемещать элементы css по их общему классу html в javascript?
Немного нуб здесь! Я работаю на чистом javascript с помощью HTML и CSS, без движка. Я пытаюсь переместить отображаемый спрайт танка, состоящий из трех частей: гусеницы, шасси и башни.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset = "UTF-8">
<link rel='stylesheet' href='.css'>
<div class='tank' id='tracks'></div>
<div class='tank' id='chasis'></div>
<div class='tank' id='turret'></div>
</head>
<body>
<script src='.js'></script>
</body>
</html>
Здесь я создал три элемента div с их уникальными идентификаторами для гусениц, шасси и башни. Все они имеют общий класс танка.
.tank {
height: 31px;
width: 31px;
position: absolute;
}
#tracks {
background: url("tracks.png");
}
#chasis {
background: url("chasis.png");
}
#turret {
background: url("turret.png");
}
В моем коде CSS я отнес все свойства, общие для трех компонентов, к их классу, поэтому они имеют одинаковый размер и положение. Поскольку каждый из трех элементов имеет уникальное изображение, которым нельзя поделиться, я присвоил его каждому элементу по идентификатору.
var tracks = document.getElementById('tracks');
var chasis = document.getElementById('chasis');
var turret = document.getElementById('turret');
tracks.style.top = '167px';
chasis.style.top = '167px';
turret.style.top = '167px';
Этот код сделал трюк в том смысле, что он успешно переместил каждый компонент вниз на 167 пикселей, но я не хочу переписывать все это каждый раз, когда я хочу перемещать резервуар по его компонентам.
var tank = document.getElementsByClassName('tank');
tank.style.top = '167px';
Вместо этого я попытался переместить весь танк по классам, но это не сработало. Что я делаю неправильно?
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
попробуйте поместить div в раздел body и свой js в раздел head.
также добавьте [0] в класс следующим образом:
var tank = document.getElementsByClassName('tank')[0];
отредактировал, потому что я понял, что они не были в div с классом танка, как это было предложено Nex
да, если бы они все были в div, как предлагает Nex, тогда он должен работать с [0], добавленным в JS
Нет, пробовал только сейчас. Я сделал div, как предложил @Nex, и поместил их в тело, в то время как js в голову и добавил [0], все еще не работал, танк даже не отображался, не говоря уже о движении.
Консоль сообщает: TypeError: tank is undefined
<div class = "tank">
<div id='tracks'></div>
<div id='chasis'></div>
<div id='turret'></div>
</div>
Вы можете просто попробовать это? Итак, у вас есть ТАНК, в котором теперь есть все детали.
.style нельзя применить к списку узлов, полученному функцией getElementsByClassName.
getElementsByClassName, он возвращает список узлов в формате объекта. Таким образом, вы не можете напрямую применить стиль к нему. Вам нужно пройти по списку, используя функции массива. Чтобы получить список массивов, вы можете использовать querySelectorAll.
const tanks = document.querySelectorAll('.tank');
tanks.forEach(function(tank, index){
tank.style.marginTop = '167px';
});
<div class = "tank">1</div>
<div class = "tank">2</div>Сдвинулись только гусеницы, шасси и башня остались на своем месте.
@ krecik2000, отредактировал мой ответ. querySelector возвращает только 1-й элемент. Поэтому нужно использовать querySelectorAll.
Хорошо, я думаю, что нашел альтернативный способ добиться этого:
Оставьте html и css как есть.
var tracks = document.getElementById('tracks');
var chasis = document.getElementById('chasis');
var turret = document.getElementById('turret');
var tank = [tracks, chasis, turret];
for (var i = 0; i < tank.length; i++) {
tank[i].style.top = '167px';
}
Отбросьте js и добавьте вышеупомянутое.
Вызовите элементы по их идентификаторам и создайте резервуар массива, который будет их содержать. Затем прокрутите массив, пока tank.length (который равен 3) больше i, переместите элементы tank на 167 пикселей. Поскольку i может быть только 0, 1 и 2, 3 элемента (помеченные 0, 1 и 2) перемещаются.
Позже, если вам понадобится доступ к отдельным элементам, вы можете вызвать их по их идентификаторам или найти их в массиве tank, например: tank [0], tank [1] или tank [2].
Не получилось, просто отображал танк как есть. Хотя, когда я оставил код div и js, как он был в html, и добавил [0] к js, дорожки сдвинулись вниз, а остальные остались наверху. Это потому, что гусеницы являются нулевым элементом танка класса.