javascript中的两个按钮冲突

我有两个按钮，分别是div和两个段落，它们相互匹配。所以你点击按钮一，按钮一旋转45度，打开第一段，按钮二除第二段外都是一样的。出于某种原因，如果你点击第一个按钮，它会打开两个段落，如果你点击第二个按钮，什么都不会发生，我也不明白为什么。我最终需要设置多个按钮和段落

var epidural_analgesia_INFO = document.images[0];
epidural_analgesia_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.3s ease-in-out");

var epidural_analgesia_DEG = 0;

epidural_analgesia_INFO.addEventListener('click', function() {
$("p#epidural_analgesia_TEXT").slideToggle("fast");
epidural_analgesia_DEG += 45;
epidural_analgesia_INFO.style.setProperty('-webkit-transform', 'rotateZ('+epidural_analgesia_DEG+'deg)');   
});




var effects_of_yoga_INFO = document.images[0];
effects_of_yoga_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.3s ease-in-out");

var effects_of_yoga_DEG = 0;

effects_of_yoga_INFO.addEventListener('click', function() {
$("p#effects_of_yoga_TEXT").slideToggle("fast");
effects_of_yoga_DEG += 45;
effects_of_yoga_INFO.style.setProperty('-webkit-transform', 'rotateZ('+effects_of_yoga_DEG+'deg)');   
});

---

我有一个fiddle设置，但是它很大，所以我在这里拉出了特定的部分，但是如果你想看到fiddle，它在这里：非常感谢你的帮助。

你正在将你的点击处理程序分配给这两个变量引用的元素：

epidural_analgesia_INFO
effects_of_yoga_INFO

但这两个变量都被初始化为引用

document.images[0]

。因此，单击该图像将触发两个处理程序。第二张图片是否应该使用

1

索引来获取第二张图片

---

（顺便说一句，当您似乎正在使用jQuery时，为什么要使用

addEventListener（）

）

明白了，在第一行中

var硬膜外镇痛信息=document.getElementById（“硬膜外镇痛信息”）

而不是

---

var effects_of_yoga_INFO=document.images[0]

如何使用jquery设置它，我不知道如何设置事件侦听器w/jquery，如何重新编写该函数？要将单击处理程序分配给id为

“硬膜外镇痛信息”

的元素，您可以说

$（“#硬膜外镇痛信息”）。单击（function（）{…}）

或

$（“#硬膜外信息”）。在（“单击”，函数（）{…}）（然后jQuery将处理事件处理程序需要处理的跨浏览器内容，例如，IE的旧版本。）