Javascript 如何将函数应用于每个当前活动模态图像_Javascript_Html_Jquery

Javascript 如何将函数应用于每个当前活动模态图像

javascript html jquery

Javascript 如何将函数应用于每个当前活动模态图像,javascript,html,jquery,Javascript,Html,Jquery,我有一个模态，并试图将一个特定的函数独立于其他图像应用于每个图像。我尝试过getElementsByClassNames，特别是尝试获取“活动”类，但在许多小时后发现这是不可能的。。。我现在深陷其中，对可能的解决方案感到非常困惑，这些解决方案似乎是访问数据目标或数据id 当我传递一个唯一的ID时，一切都正常，但我无法获得读取当前模态图像的函数这应该是所有相关的html和脚本： <HTML> // modal// function openModal() { documen

我有一个模态，并试图将一个特定的函数独立于其他图像应用于每个图像。我尝试过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");
~~~~~...}

//模态//
函数openModal（）{
document.getElementById（“myModal”）.style.display=“block”；
工具（）；
}
函数closeModal（）{
document.getElementById（“myModal”）.style.display=“无”；
}
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
//具有slideindex n的工具功能//
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
如果（n>幻灯片长度）{
slideIndex=1；
}
if（n<1）{
slideIndex=slides.length；
}
对于（i=0；i


Z
由于只有一个活动元素，您可以按如下方式访问它：

document.body.addEventListener（'click'，t，true）；
函数t（）{
console.log（document.activeElement.tagName）
log（document.activeElement.id）
log（document.activeElement.name）
console.log（document.activeElement）}
由于只有一个活动元素，您可以按如下方式访问它：

document.body.addEventListener（'click'，t，true）；
函数t（）{
console.log（document.activeElement.tagName）
log（document.activeElement.id）
log（document.activeElement.name）
console.log（document.activeElement）}
我解决了这个问题：我更改了每个图像ID，使其包含一个数字，例如“myimage1”等，然后当我调用ID“myimage”时，我还调用了每个幻灯片编号的console.log，该编号与ID号匹配，并将这两个编号组合成getElementById。感谢@DCR感谢您为我指明了控制台日志的方向。
我解决了这个问题：我更改了每个图像ID以包含一个数字，例如“myimage1”等，然后当我调用ID“myimage”时，我还调用了每个幻灯片编号的console.log，该编号与ID号匹配，并将它们组合在一起，然后获取ElementById。感谢@DCR感谢您为我指出控制台日志的方向。
如果您只需要获取活动元素，是否可以编辑代码段并为我们提供一个工作模型？是否尝试过document.activeElement.tagName；？我确实试过了，但没有成功，我试过：img=document.activeElement（imgID）；我认为那是不对的。尝试以下操作：console.log（document.activeElement.tagName）并告诉我您得到了什么。确保有一个活动的元素，比如关注输入框。请记住，只有一个活动元素。很抱歉，我不知道该放什么，此时函数正在使用“imgID”从HTML调用标记。所以img=document.activeElement（imgID）；，你是说应该是img=console.log（document.activeElement.imgID）。我认为这没有什么意义。如果您只需要获取活动元素，是否可以编辑代码段并为我们提供一个工作模型？您是否尝试过document.activeElement.tagName；？我确实试过了，但没有成功，我试过：img=document.activeElement（imgID）；我认为那是不对的。尝试以下操作：console.log（document.activeElement.tagName）并告诉我您得到了什么。确保有一个活动的元素，比如关注输入框。请记住，只有一个活动元素。很抱歉，我不知道该放什么，此时函数正在使用“imgID”从HTML调用标记。所以img=document.activeElement（imgID）；，你是说应该是img=console.log（document.activeElement.imgID）。我认为这没有道理。我听到了，但它不起作用。我通过一个单独的按钮调用该函数：onclick=“imageZoom（'myimage'，'myresult'）”，函数运行：function imageZoom（imgID，resultID）{var img=document.activeElement（imgID）；…}我认为调用和运行函数的方式将其抛弃。我不知道我已经挣扎了几个小时，但我是个新手。只有一个活跃的元素。Var img=document.activeElement；我解决了这个问题：我更改了每个图像ID以包含一个数字，例如“myimage1”等，然后当我调用ID“myimage”时，我还调用了每个幻灯片编号的console.log，该编号与ID编号匹配，并将它们组合成getElementById。谢谢@DCR谢谢你给我指出控制台日志的方向。我听到了，但它不起作用。我通过一个单独的按钮调用该函数：onclick=“imageZoom（'myimage'，'myresult'）”，函数运行：function imageZoom（imgID，resultID）{var img=document.activeElement（imgID）；…}我认为调用和运行函数的方式将其抛弃。我不知道我已经挣扎了几个小时，但我是个新手。只有一个活跃的元素。Var img=document.activeElement；我解决了：我改变了每个ima