函数在mousehover上显示div或在mouseout上使用Javascript将div隐藏到forEach中

Question

我想制作一个函数，在mouseover上显示div id="capa-video"并播放视频，在mouse out上隐藏<div id="capa-imagem">并暂停视频。你可以看到下面的代码

<div class="thumbnailBig"> 
<a href="#" title="text" class="link">
<div id="capa-imagem"> 
<img src="<?php echo $thumbnail_src[0]; ?>" alt="<?php the_title(); ?>" />      
</div>

<div id="capa-video">
<video preload="none" muted id="video-tocar"> 
<source src="<?= $mostrar_preview ?>" type="video/mp4">                 
</video>
</div> 
</a> </div>

下面的代码是php中的forEach函数

<?php echo $thumbnail_src[0]; ?>
<?= $mostrar_preview ?>

我的javascript代码是

var mostrar = document.getElementsByTagName("thumbnailBig");
[].forEach.call(mostrar, function(item){
item.addEventListener('mouseover', hoverMostrar, false);
item.addEventListener('mouseout', hideMostrar, false);
});
function hoverMostrar(e){
document.getElementById("capa-video").style.display = "block";
document.getElementById("capa-imagem").style.display = "none";  
}
function hideMostrar(e){
document.getElementById("capa-video").style.display = "none";
document.getElementById("capa-imagem").style.display = "block";  
}
var vid = document.getElementsByTagName("video");  
[].forEach.call(vid, function(item){
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);    
});
function hoverVideo(e){
this.play();    
}
function hideVideo(e){
this.pause();    
}

我的代码可以在mouseover上播放视频，在mouseout上暂停视频，但我不能在显示或隐藏div id="capa-imagem"到<div id="capa-video">之间切换。我该怎么做？

Answer 1

您正在复制元素capa-imagem和capa-video的ID，请将其更改为class，这样访问它们就不会有问题。

另一个错误是，您试图使用document.getElementsByTagName("thumbnailBig");获取容器，但这是容器类名。请改用querySelectorAll()。

然后，使用NodeList.forEach()循环项目以添加事件侦听器。我已经对每一块代码进行了注释，这样你就可以知道它是如何工作的。如果您有任何疑问，请随时询问。

// Get all containers by its class name
let thumbs = document.querySelectorAll('.thumbnailBig');
// Get all videos by its tag name
let videos = document.querySelectorAll('video');
// Add event listeners for containers
thumbs.forEach(thumb => {
thumb.addEventListener('mouseover', hoverMostrar);
thumb.addEventListener('mouseout', hideMostrar);
});
function hoverMostrar(e) {
// e is the fired event, "this" is not available here, it refers to window
// e.target is the element that fires the event
// closest() will find parent, if not, will return same element
let thumb = e.target.closest('.thumbnailBig');
// From parent, search for image and video containers to show or hide
thumb.querySelector('.capa-imagem').style.display = 'none';
thumb.querySelector('.capa-video').style.display = 'block';
}
function hideMostrar(e) {
let thumb = e.target.closest('.thumbnailBig');
thumb.querySelector('.capa-imagem').style.display = 'block';
thumb.querySelector('.capa-video').style.display = 'none';
}
// Add listeners for video
videos.forEach(video => {
// e.target is the video that fired the event
video.addEventListener('mouseover', e => e.target.play());
video.addEventListener('mouseout', e => e.target.pause());
});

.thumbnailBig img {
max-width:100px;
max-height:100px;
}
.capa-imagen {
display: block;
}
.capa-video {
display:none;
}

<div class="thumbnailBig">
<a href="#" title="text" class="link">
<div class="capa-imagem"> 
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="airplane" />      
</div>
<div class="capa-video">
<video preload="none" muted id="video-tocar"> 
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">                 
</video>
</div> 
</a>
</div>
<div class="thumbnailBig">
<a href="#" title="text" class="link">
<div class="capa-imagem"> 
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="airplane" />      
</div>
<div class="capa-video">
<video preload="none" muted id="video-tocar"> 
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">                 
</video>
</div> 
</a>
</div>

Answer 2

简单修复。传递一个匿名回调声明并调用您的两个处理程序，而不是向事件侦听器传递一个命名回调。

item.addEventListener('mouseover', function() {
hoverVideo();
hoverMostar();
});