英文:
Add class to the nearest element inside a foor loop
问题
I'm trying to add class to an image looping into an Array.
我正在尝试将类添加到循环中的图像数组中。
I have an array of elements settled with an document.querySelectorAll.
我有一个使用document.querySelectorAll设置的元素数组。
When i hover into a single of this element i want to add a class to his image, but when hovering the only image with the class added in mouseover is only the first one (even if i mouseover the other two elements).
当我悬停在其中一个元素上时,我想将类添加到其图像中,但在悬停时,只有在mouseover中添加了类的图像是第一个(即使我在其他两个元素上悬停)。
HTML:
HTML:
<h2 class="wp-block-heading custom-font-h2 col-75 d-scroll has-large-font-size">Nato a NAPOLI<br>nel ‘92—Devoto a <span class="evidence">Reggie Miller</span> <img class="evidence-img" src="https://robertoacampora.it/wp-content/uploads/2023/05/reggie_miller_website_roberto_acampora.jpg">& <span class="evidence">John Stockton</span><img class="evidence-img" src="https://robertoacampora.it/wp-content/uploads/2023/05/john-stockton_website_roberto_acampora.jpg"></h2>
Javascript:
Javascript:
let textevidences = document.querySelectorAll('.evidence');
for (let textevidence of textevidences) {
textevidence.addEventListener('mouseover', MouseIn);
function MouseIn() {
let image = textevidence.nextElementSibling;
image.classList.add('display');
console.log(image);
}
textevidence.addEventListener('mouseleave', MouseLeave);
function MouseLeave() {
let image = textevidence.nextElementSibling;
image.classList.remove('display');
}
}
I also tried with this Js:
我还尝试了这个Js:
document.querySelectorAll('.evidence').forEach(element => {
element.addEventListener('mouseover', () => {
let image = element.nextElementSibling;
image.classList.add('display');
});
});
// Remove class on mouseout
document.querySelectorAll('.evidence').forEach(element => {
element.addEventListener('mouseout', () => {
let image = element.nextElementSibling;
image.classList.remove('display');
});
});
The class added to all the single image near the class in hover, not only the first one image.
类被添加到悬停时附近的所有单个图像,而不仅仅是第一个图像。
英文:
i'm trying to add class to an image looping into an Array.
I have an array of elements settled with an document.querySelectorAll.
When i hover into a single of this element i want to add a class to his image, but when hovering the only image with the class added in mouseover is only the first one (even if i mouseover the other two elements).
HTML:
<h2 class="wp-block-heading custom-font-h2 col-75 d-scroll has-large-font-size">Nato a NAPOLI<br>nel ‘92—Devoto a <span class="evidence">Reggie Miller</span> <img class="evidence-img" src="https://robertoacampora.it/wp-content/uploads/2023/05/reggie_miller_website_roberto_acampora.jpg">&amp; <span class="evidence">John Stockton</span><img class="evidence-img" src="https://robertoacampora.it/wp-content/uploads/2023/05/john-stockton_website_roberto_acampora.jpg"></h2>
Javascript:
let textevidences = document.querySelectorAll('.evidence');
for(let textevidence of textevidences){
textevidence.addEventListener('mouseover', MouseIn);
function MouseIn(){
let image = document.querySelector('.evidence-img');
textevidence.image.classList.add('display'));
console.log(textevidence.closest('img'));
}
textevidence.addEventListener('mouseleave', MouseLeave);
function MouseLeave(){
let image = document.querySelector('.evidence-img');
image.classList.remove('display');
}
}
I also tried with this Js:
document.querySelectorAll('.evidence').forEach(element => {
element.addEventListener('mouseover', () => {
console.log('mouseover');
let image = document.querySelector('.evidence-img');
image.classList.add('display');
});
});
// Remove class on mouseout
document.querySelectorAll('.evidence').forEach(element => {
element.addEventListener('mouseout', () => {
let image = document.querySelector('.evidence-img');
image.classList.remove('display');
});
});
The class added to all the single image near the class in hover, not only the first one image.
答案1
得分: 0
document.querySelector
搜索整个页面,从顶部开始,并返回第一个匹配项。在这种情况下,通常是第一个图像。所以这不是你需要的。
closest
用于查找最接近的匹配条件的父元素。所以在这里也不适用。
你可能想要在这里使用的是 nextSibling
,它返回下一个兄弟元素。在你的HTML中,在 span
和 img
之间有一个空格,所以在span之后的nextSibling实际上将是一个包含该空格的TextElement,而不是图像。但也许你想在这两者之间放更多的内容。
要找到每个span后面的下一个图像,你可以迭代该span之后的所有兄弟元素,直到找到一个带有图像类的元素。
let textevidences = document.querySelectorAll('.evidence');
for (let textevidence of textevidences) {
let evidenceImage = textevidence.nextSibling;
while (evidenceImage && !evidenceImage.classList?.contains("evidence-img")) {
evidenceImage = evidenceImage.nextSibling;
}
// 现在,要么我们在evidenceImage中有图像,要么我们已经到达最后一个兄弟元素,而没有找到图像,此时evidenceImage是未定义的。
if (!evidenceImage) {
break;
}
textevidence.addEventListener('mouseover', () => {
evidenceImage.classList.add("display");
});
textevidence.addEventListener('mouseleave', () => {
evidenceImage.classList.remove("display");
});
}
希望这可以帮助你。
英文:
document.querySelector
searches the whole page starting from the top and returns the first hit. Which in this case always is the first image. So that's not what you need.
closest
is meant to find the closest parent which matches the condition. So that's not what you need here either.
What you probably want to use here is nextSibling
, which returns the next sibling element. In your HTML you have a space between the span
and the img
, so the nextSibling after the span will actually be a TextElement with that space, and not the image. But maybe you want to put some more stuff in between the two anyway.
To find the next image after each span, you can iterate over all sibling elements after that span, until you find one with the image class.
let textevidences = document.querySelectorAll('.evidence');
for (let textevidence of textevidences) {
let evidenceImage = textevidence.nextSibling;
while (evidenceImage && !evidenceImage.classList?.contains("evidence-img")) {
evidenceImage = evidenceImage.nextSibling;
}
// Now either we have the image in evidenceImage, or we've reached the last sibling without finding an image, in which case evidenceImage is undefiend.
if (!evidenceImage) {
break;
}
textevidence.addEventListener('mouseover', () => {
evidenceImage.classList.add("display");
});
textevidence.addEventListener('mouseleave', () => {
evidenceImage.classList.remove("display");
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论