javascript - Javascript onClick 仅打开第一张图片

Question

我的 onClick 事件有问题。无论我点击哪个图片，它总是会打开页面上的第一张图片。它只是不会打开任何其他图像。

javascript：

function opennew() {
    var largeImage = document.getElementById('largeImage');
    largeImage.style.display = 'block';
    largeImage.style.width=130+"px";
    largeImage.style.height=130+"px";
    var url=largeImage.getAttribute('src');
    window.open(url,'Image','width=largeImage.stylewidth,
       height=largeImage.style.height,resizable=1');
}

HTML：

<div class="oneitem">
  <div><img id="largeImage"  onClick="opennew();" src="Books-001.jpg" />
  </div>
  <p>Caption goes here</p>
</div>

Answer 1

您是否为每个 img 使用相同的 ID 属性 largeImage？

ID 是一个唯一字段，您只能在页面中使用一个 ID 名称。

解决方案是您执行以下操作：

html:

<div class="oneitem">
    <div>
      <img id="1"  onClick="opennew(1);" src="Books-001.jpg" />
     </div><p>Caption goes here</p>
</div>

<div class="oneitem">
    <div>
        <img id="2"  onClick="opennew(2);" src="Books-001.jpg" />
    </div><p>Caption goes here</p>
 </div>

JS：

function opennew(Id) {
var largeImage = document.getElementById(Id);
largeImage.style.display = 'block';
largeImage.style.width=130+"px";
largeImage.style.height=130+"px";
var url=largeImage.getAttribute('src');
window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
}