Javascript работает только с одним классом
довольно новичок в Javascript. У меня есть анимация скольжения текста. Первый div работает, а второй нет. У меня есть два div, но работает только один. Любые предложения/помощь в том, что кажется неправильным?
Вот мой код ниже:
const txts = document.querySelector(".animate-text").children,
txtsLen = txts.length;
let index = 0;
const textInTimer = 3000,
textOutTimer = 2800;
function animateText() {
for (let i = 0; i < txtsLen; i++) {
txts[i].classList.remove("text-in", "text-out");
}
txts[index].classList.add("text-in");
setTimeout(function () {
txts[index].classList.add("text-out");
}, textOutTimer);
setTimeout(function () {
if (index == txtsLen - 1) {
index = 0;
} else {
index++;
}
animateText();
}, textInTimer);
}
window.onload = animateText;.home .tree p {
margin: 0;
overflow: hidden;
}
.home .tree p span {
font-size: 2.8vw;
color: grey;
font-weight: 500;
display: none;
}
.home .tree p span.text-in {
display: block;
animation: textIn 0.5s ease;
}
.home .tree p span.text-out {
animation: textOut 0.5s ease;
}
@keyframes textIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
@keyframes textOut {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-100%);
}
}<div class = "home">
<div class = "tree">
<p class = "animate-text">
<span class = "">first</span>
<span class = "">second</span>
<span class = "text-in">third</span>
<span class = "">forth</span>
<span class = "">fifth</span>
</p>
</div>
</div>
<div class = "home">
<div class = "tree">
<p class = "animate-text">
<span class = "">first</span>
<span class = "">second</span>
<span class = "text-in">third</span>
<span class = "">forth</span>
<span class = "">fifth</span>
</p>
</div>
</div>Я попробовал селектор getElementByClassName, но ни одно из предложений, которые я искал здесь, похоже, не работает.
Говоря о «работе», я имел в виду тот факт, что верхний текст прекрасно скользит вверх. Я пытаюсь добиться того, чтобы второй div делал то же самое, что и первый (анимация слайда вверх). Я хотел бы дублировать div, чтобы у меня было несколько анимаций слайдов с использованием одного и того же Javascript. Надеюсь, это прояснит конечный результат, который мне нужен, спасибо.
Я также пытался использовать document.getElementsByClassName("html-code")[0] document.getElementsByClassName("html-code")[1] для ссылки на два элемента div, но они тоже не работают. Первый div - единственный div, который выполняет Javascript, странно.
Это не странно. Вы вызываете .querySelector(), чтобы найти родителя <p>, и это найдет только первый такой <p> на странице.
Какой селектор следует использовать, чтобы он вызывал все теги <p> в классе animate-text?
Вам нужно использовать querySelectorAll('.animate-text').
Спасибо за помощь, Шуо. Но это не сработало. Я попытался заменить его, но это полностью останавливает всю анимацию (оба все еще сейчас). Спасибо за ваш вклад.
querySelectorAll вернет нодлист, вы можете использовать foreach, чтобы добавить анимацию ко всем .animate-text.
@Shuo - ты имеешь в виду вот так? const txts=document.querySelectorAll('.animate-text').children,txtsLen=txts.length;forEach(myFunction);
Пожалуйста, не оставляйте код в комментариях. Это не читается. Отредактируйте свой вопрос и добавьте туда код. Документация содержит примеры.
Отвечает ли это на ваш вопрос? Что возвращают методы querySelectorAll и getElementsBy*?
@Jabaa - Спасибо за ваш комментарий, а также за ваши предложения. Но я верю, что у Бретта есть решение. Спасибо, несмотря ни на что, и прекрасного дня/ночи.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Что не так в вашем коде, так это то, что document.querySelector(".animate-text") возвращает только первый элемент с классом animate-text. Вместо этого используйте querySelectorAll(), чтобы получить список всех элементов с этим классом.
const animateP = e => {
const textInTimer = 3000, textOutTimer = 2800
const txts = e.children
const txtsLen = txts.length
let index = 0
const animateSpan = () => {
for (let i = 0; i < txtsLen; i++)
txts[i].classList.remove("text-in", "text-out")
txts[index].classList.add("text-in")
setTimeout(function () {
txts[index].classList.add("text-out")
}, textOutTimer)
setTimeout(function () {
if (index == txtsLen - 1)
index = 0
else
index++
animateSpan()
}, textInTimer)
}
animateSpan()
}
document.querySelectorAll(".animate-text").forEach(e => {
animateP(e)
}).home .tree p {
margin: 0;
overflow: hidden;
}
.home .tree p span {
font-size: 2.8vw;
color: grey;
font-weight: 500;
display: none;
}
.home .tree p span.text-in {
display: block;
animation: textIn 0.5s ease;
}
.home .tree p span.text-out {
animation: textOut 0.5s ease;
}
@keyframes textIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
@keyframes textOut {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-100%);
}
}<div class = "home">
<div class = "tree">
<p class = "animate-text">
<span class = "">first</span>
<span class = "">second</span>
<span class = "">third</span>
<span class = "">fourth</span>
<span class = "">fifth</span>
</p>
</div>
</div>
<div class = "home">
<div class = "tree">
<p class = "animate-text">
<span class = "">first</span>
<span class = "">second</span>
<span class = "">third</span>
<span class = "">fourth</span>
<span class = "">fifth</span>
</p>
</div>
</div>БИНГО! Который прибивает рамку к стене. Большое спасибо, Бретт. Я пытался обернуть голову вокруг в течение нескольких дней безрезультатно. Я не могу поверить, что ты решил это. Спасибо, сэр.
Помните: мы не знаем, что для вас значит «работа» (согласно классическому выражению «код не «не работает», он всегда делает именно то, что вы ему сказали»), поэтому объясните, что вы ожидаете, что произойдет, основываясь на том, когда вы что-то делаете, с учетом кода, который вы показываете, а затем расскажите о том, что на самом деле происходит, и, наконец, расскажите о том, что вы уже сделали с точки зрения (повторного) исследования/исследования/отладки.