使用单独的 onclick 事件修改 onclick

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>

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

我也试过用变量来做这件事，但有点纠结。 关于我如何去做这件事的任何想法？我快到了，只是还没到。

谢谢！

Answer 1

小提琴：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();" 相同，它什么也不做。

Answer 2

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

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

<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>

Answer 3

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

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

然后只需使用一个变量来跟踪当前选择的图像是什么：

// 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();
});

<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>

还请注意，我为您的下部图像添加了一个类，以便在循环中轻松处理它们以添加它们的点击处理程序。这是可选的，您可以通过 id 选择而不是 .querySelectorAll("#image1,#image2")。