Javascript放大不同的标签

我通过按钮和鼠标滚轮function进行了简单的放大和缩小function。 主要概念是限制最大缩放级别和最小缩放级别。

我已经成功地以两种方式做到了

BIN 1 BIN 2

但我试图在具有唯一ID或类的选项卡部分中进行此操作。

我的剧本

var zoomLevel = 100; var maxZoomLevel = 150; var minZoomLevel = 50; var initW=0,initH=0; function zoom(zm) { var img=document.getElementById("pic"); if(zm > 1){ if(zoomLevel < maxZoomLevel){ zoomLevel+=10; }else{ return; } }else if(zm  minZoomLevel){ zoomLevel-=10; }else{ return; } } img.style.width = (initW*zoomLevel/100)+"px"; img.style.height = (initH*zoomLevel/100)+"px"; img.style.marginLeft = ((initW-img.width)/2) + "px"; img.style.marginTop = ((initH-img.height)/2) + "px"; } window.onload=function(){ var img=document.getElementById("pic"); initW=img.width; initH=img.height; img.onmousewheel=function(e){ e=e||window.event; if(e.wheelDelta>=120) zoom(1.1); else zoom(0.9); }; if(/Firefox/.test(navigator.userAgent)){ img.addEventListener("DOMMouseScroll",function(e){ if(e.detail0) zoom(0.9); e.preventDefault(); },false); } }; 

在这里，我通过使用GetElementById访问我的图像标签来获取我的元素是否有任何方法可以访问其他选项卡中的所有img标签。

我也尝试了getElementsbyClassName，但它不能只检索nodeslist。

我如何在这里访问所有三个图像

目前的BIN

Answer 1

你需要使用不同的ID

 var img=document.getElementById("pic1"); var img=document.getElementById("pic2");` 

Answer 2

您已为所有三个图像分配了相同的ID（ id="pic" ）。 你不能那样做，ids必须是独一无二的。

如果你改变他们的id（例如：pic，pic2，pic3），并将其作为参数传递给你的缩放function，那么所有的标签都会变焦。

因此，将缩放function更改为如下所示：

 function zoom(zm, id) { var img=document.getElementById(id); ... } 

并使你的HTML看起来像这样（只有一个例子）：

现在这三个都将单独缩放。 这是一个显示它的jsbin 。

但是，有一个错误。 用于跟踪缩放状态的变量在选项卡之间共享。 这意味着“缩放限制”并未真正实施：您可以一直缩小一个选项卡，然后一直缩放下一个选项卡。 重复此操作可使任何图像变大或变小。 我不认为这是你想要的，但我会给你一个练习让你解决。