javascript - JavaScript MouseOver 仅适用于 Velocity #foreach 语句中的第一个实例
问题描述
我对 JavaScript 还是很陌生。提前抱歉。我有一些 HTML 和 Velocity Template Engine #foreach 语句来从数据库中呈现一些 html。
这个想法是将鼠标悬停在渲染的图像上并结束。我遇到的问题是(我认为)javascript,只有第一个渲染的图像实际上得到了覆盖。由于某种原因,所有后第一个都没有。
$(document).ready(function(){
var amiibo = document.getElementById("amiibo");
var activeAmiiboID = amiibo.textContent || amiibo.innerText;
$("#inactive-"+activeAmiiboID).mouseover(function() {
console.log("#inactive has been moused over / activeAmiiboID: "+ activeAmiiboID);
$("#active-"+activeAmiiboID).removeClass("is-invisible");
});
这是 HTML 片段:
<div class="columns is-multiline">
<!-- Here are all of the Amiibo -->
#foreach( $amiibo in $amiibos )
<div class="column is-one-fifth">
<div class="amiibo-id is-hidden" id="amiibo">$amiibo.AmiiboID</div>
<article class="message is-large is-danger">
<div class="message-header">
<p></p>
<p>$amiibo.Name</p>
<p></p>
</div>
<center> <!-- Amiibo -->
<figure class="image has-text-light">
<img class="amiibo-image" src="$amiibo.ImageURL" id="inactive-$amiibo.AmiiboID">
<!-- Content Over Amiibo -->
<figcaption class="overlay is-overlay is-invisible" id="active-$amiibo.AmiiboID">
<!-- Background -->
<img class="background is-overlay" alt="Mario" src="https://storage.googleapis.com/amiibo/black.png">
<div style="height:16px;font-size:16px;"> </div>
<!-- Buttons -->
<div class="tile is-ancestor">
<!-- Collected "Mine" (Star) Button -->
<div class="tile is-parent">
<article class="tile is-child">
<div class="star">
<label>
<span class="fa-stack">
<i class="fas fa-star fa-2x"></i>
<h4 class="subtitle is-5 has-text-light is-bold">Mine</h4>
<input class="mine is-hidden" type="checkbox" id="mine">
</span>
</label>
</div>
</article>
</div>
<!-- Collected "Love" (Heart) Button -->
<div class="tile is-parent">
<article class="tile is-child">
<div class="heart">
<label>
<span class="fa-stack">
<i class="fas fa-heart fa-2x"></i>
<h4 class="subtitle is-5 has-text-light is-bold">Love</h4>
<input class="love is-hidden" type="checkbox" id="love">
</span>
</label>
</div>
</article>
</div>
<!-- Collected "Want" (Gem) Button -->
<div class="tile is-parent">
<article class="tile is-child">
<div class="gem">
<label>
<span class="fa-stack">
<i class="fas fa-gem fa-2x"></i>
<h4 class="subtitle is-5 has-text-light is-bold">Want</h4>
<input class="want is-hidden" type="checkbox" id="want">
</span>
</label>
</div>
</article>
</div>
</figcaption>
</figure>
</center>
</article>
</div>
#end
</div>
我究竟做错了什么?非常感谢任何帮助或指导。
特拉维斯·W。
解决方案
当前结果是预期的,因为现在您只针对具有当前 activeAmiiboID 的图像。您应该像这样按类定位所有图像以获得所需的功能:
$(document).ready(function(){
$('.amiibo-image').mouseover(function() {
var imgId = $(this).attr('id');
var id = imgId.split('-')[1];
$("#active-"+ id).removeClass("is-invisible");
});
});
推荐阅读
- java - Dialogflow Java API 返回奇怪的字符串
- machine-learning - 在 2 个区域之间发现了圣器
- python - 无法写入 MS SQL Server
- maven - 如何在 sonarqube 7.4 中添加 maven 生成的 findbugs、pmd、checkstyle 报告
- c++ - 在迭代器中取消引用类指针函数
- r - `R`中`reorder()`背后的逻辑?
- python - 用Python,如何防止两个线程同时写入显示
- c++ - CLion 问题中带有 Vulkan 的 CMake 3.12
- javascript - 无法在 javascript 中使用 php 读取文件夹内的图像
- php - 注册用户名相同时不显示警报框