我有一个模态,正在尝试将一个特定的函数独立于其他图像应用于每个图像。我尝试过getElementsByClassNames,特别是尝试获得"活动"类,几个小时后发现这是不可能的。。。我现在深陷其中,对可能的解决方案感到非常困惑,这些解决方案似乎是访问数据目标或的数据id。
当我传递一个唯一的ID时,一切都正常,但我无法获得读取当前模态图像的函数。
这应该是所有相关的html和脚本:
<HTML>
// modal//
function openModal() {
document.getElementById("myModal").style.display = "block";
tools();
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
//tools function with slideindex n//
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++)
{
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "flex";
dots[slideIndex - 1].className += " active";
}
//the start of the effect script, tried and failed to pass a unique id on active slide...//
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
var imgID = $('#this').data('id');
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
~~~~~...}
<div class="modalIcon">
<img src="image1.jpg" style="width:100%;max-width:300px;" onclick="openModal();currentSlide(1);" alt="info text" class="hover-item cursor">
</div>
<div class="modalIcon">
<img src="imge2.jpg" style="width:100%;max-width:300px" onclick="openModal();currentSlide(2);" class="hover-item cursor">
</div>
<div id="myModal" class="modal">
<div class="modal-content" id="mod">
<div class="mySlides">
<div class="modalImage">
<img class="modimg" id="mymodalimage" data-target="#modal" data-id="0" src="image1.jpg">
</div>
<div class="modalImage">
<img class="modimg" id="mymodalimage" data-target="#modal" data-id="1" src="image2.jpg">
</div>
</div>
</div>
</div>
<div class="imageEffect">
<span class="effectbtn cursor" id="showzoombox" onclick="imageZoom('myimage', 'myresult')">z</span>
</div>
<脚本>
由于只有一个活动元素,您可以按如下方式访问它:
document.body.addEventListener('click', t, true);
function t(){
console.log(document.activeElement.tagName)
console.log(document.activeElement.id)
console.log(document.activeElement.name)
console.log(document.activeElement)}
<input name='test' id='save' />
我解决了这个问题:我更改了每个图像ID,使其包含一个数字,例如"myimage1"等,然后当我调用ID"myimage"时,我还调用了每个幻灯片编号的console.log,该编号与ID编号相匹配,并将两者组合,然后获得ElementById。谢谢@DCR,谢谢你给我指明控制台日志的方向。