js控制重复id下，只能取得第一个值，希望是点击那个值获取那个值

jaryle

于 2018-07-10 11:36:34 发布

阅读量3.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/jaryle/article/details/80983234

版权

本文记录了一个在JavaScript中遇到的问题：当存在重复ID的元素时，原本的onclick事件总是返回第一个元素的值。作者通过调试和查阅资料发现，应该在事件处理函数中传递this参数，以确保能获取到点击目标的值。解决方案是利用this在onclick事件中获取正确的src。

摘要由CSDN通过智能技术生成

本来对js没有做个系统的学习，都是在工作中积累的，大部分都能解决，只是没有太注意细节，今天就遇到了这个，本来想着很简单的，分分钟就能解决，后来用了半个小时，还是查资料，才想起来之前有过这种写法。现在总结一下

本来模板文件，使用el表达式循环获取一组img，所以id是重复的，添加了onclick事件，获取图片的src值，在另一个div中显示其大图。

写完之后总是获取第一个值的src，（使用chrome调试工具显示图片的src是不一样的，为什么总是获取第一个值呢）调试了一会还是没有解决，上网搜索一下，恍然大悟，在onclick事件中传入this参数，这样点击那个就获取那个的值。代码简单如下：

<div id="preview">
                <div class="jqzoom" style="position:relative;">
                    <a class="cloud-zoom" id="zoom1" rel="lensOpacity:1,adjustX:10" href="javascript:void(0);" style="position: relative; display: block;">
                        <img id="bigimg" src="@bigimg" alt="@name">