Question

我有三张可点击的图片。第一行有一个图像，第二行有两个图像。第一行上的图像是最后一次单击第二行上的任何图像的反映。我可以让第二行的图像修改第一行图像的src，但是很难修改锚标记的onclick参数。我不能只改变第一个图像的href，它必须实际模仿第二行图像的点击。这是我的代码，以及它的jsfiddle：

https://jsfiddle.net/2hgzmnmb/

<a onclick="document.getElementById('image1').click();" id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a>

<br><br> 

<a id="image1" onclick="document.getElementById('previewImage').src='http://i.imgur.com/UevhwuA.png';alert('1')"><img src="http://i.imgur.com/UevhwuA.png"></a>

<a id="image2" onclick="document.getElementById('previewImage').src='http://i.imgur.com/121fy0E.png';alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>

我想在底行的第一张图片的onclick参数中添加以下内容：document.getElementById('previewLink').onclick='document.getElementById('image1').click();'：document.getElementById('previewLink').onclick='document.getElementById('image2').click();' 到底行的第二个图像，因此第一行上的图像不仅看起来像第二行上最后一次点击的图像，而且还模仿实际的点击。现在，显然从代码中，它只会模仿单击第二行上的第一个图像，无论最后一次点击什么图像，我在想它是因为当我尝试修改onclick属性时我的语法不正确第一行图像的锚标记。

我也试过用变量做这个，但结点有点扎。关于如何做到这一点的任何想法？我很接近，就在那里。

谢谢！

Answer 1

我删除内联处理程序并改为使用addEventListener() - 除了演示目的，我已将alert()消息留在内联onclick属性中以模拟单击要在预览图像上单击以模仿的行为。

通过将逻辑放入<script>元素中的JS，您会发现它更容易维护，因为您可以以可读的方式格式化代码。

然后只需使用变量来跟踪当前所选图像的内容：

＆＃13;

// the following JS should be in a script element at the end of the body
// and/or wrapped in a window onload handler

function imageClick(e) {
  currentImage = e.currentTarget;
  document.getElementById("previewImage").src = currentImage.querySelector("img").src;
}

var images = document.querySelectorAll(".image");
for (var i = 0; i < images.length; i++) {
  images[i].addEventListener("click", imageClick);
}

var currentImage = images[0]; // default to first image

document.getElementById('previewLink').addEventListener("click", function() {
  currentImage.click();
});

＆＃13;

<a id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a>
<br><br>       
<a id="image1" class="image" onclick="alert('1')"><img src="http://i.imgur.com/UevhwuA.png"></a>      
<a id="image2" class="image" onclick="alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>

＆＃13;

另请注意，我在较低的图像中添加了一个类，以便在循环中轻松处理它们以添加其单击处理程序。这是可选的，您可以使用.querySelectorAll("#image1,#image2")来选择ID。

Answer 2

将下面的行添加到第二行中的每个锚标记

document.getElementById('previewLink').related_id=this.id

＆＃13;

<a onclick="if(document.getElementById(this.related_id)!=null){document.getElementById(this.related_id).click()};" id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a>
      
    <br><br> 
      
    <a id="image1" onclick="this.related_id=this.id;document.getElementById('previewImage').src='http://i.imgur.com/UevhwuA.png';alert('1');document.getElementById('previewLink').related_id=this.id"><img src="http://i.imgur.com/UevhwuA.png"></a>
      
    <a id="image2" onclick="this.related_id=this.id;document.getElementById('previewImage').src='http://i.imgur.com/121fy0E.png';document.getElementById('previewLink').related_id=this.id;alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>

＆＃13;

Answer 3

小提琴：https://jsfiddle.net/2hgzmnmb/1/

这：document.getElementById('previewLink').onclick='document.getElementById('image1').click();' 应该： document.getElementById('previewLink').onclick=this.onclick

因为onclick属性实际上正在运行JS代码，所以如果你在那里传递一个字符串，它会将它解释为一个字符串。

onclick='document.getElementById('image1').click();'与字符串"document.getElementById('image1').click();"相同，它什么都不做。

使用单独的onclick事件修改onclick

3 个答案: