使用单独的onclick事件修改onclick

我有三个可单击的图像。第一行一个图像，第二行两个图像。第一行的图像反映了最后一次点击第二行的图像。我可以让第二行的图像修改第一行图像的src，但是无法修改锚标记的onclick参数。我不能只是改变第一个图像的href，它必须实际上模仿第二行图像的点击。这里是我的代码连同由它的jsfiddle：使用单独的onclick事件修改onclick

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属性的时候，我的语法不正确第一行图像的锚标签。

我也试着用变量来做这件事，但有点打结。关于如何去做这件事的任何想法？我很近，只是还没有。

谢谢！

来源

2016-10-18 JCOX

我取出内嵌处理器和使用addEventListener()代替 - 除了我已经离开你的alert()消息在onclick属性来模拟你想要的预览图像上单击来模拟点击行为的在线演示的目的。

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

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

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

还请注意，我为了让您轻松添加了一个类你的下图片在循环中处理它们以添加它们的点击处理程序。这是可选的，您可以选择编号为.querySelectorAll("#image1,#image2")。

来源

2016-10-18 03:04:14 nnnnnn

很好的建议！... ahh有一点需要注意：“第一行的图像不仅看起来像上次点击第二行的图像，而且还会模仿实际的点击***” ？ – repzero

@repzero - 我所展示的代码确实模仿了点击。 – nnnnnn

我的意思是顶行图像模仿点击功能，匹配下面的图像？...或者我错了吗？问题是有点嘀嗒 – repzero

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

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>

来源

2016-10-18 03:06:15 repzero

这个概念很好用，但注意''.related_id'没有默认设置，因此在其他图像之前单击预览图像会在控制台中出现错误。（另外我不认为你需要'this.related_id = this.id'部分，因为它将它设置在单击的元素上。） – nnnnnn

You right .... answer edited..hee hee：D..tanks – repzero

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

来源

2016-10-18 03:11:12

使用单独的onclick事件修改onclick

回答

相关问题