javascript - javascript中两个按钮冲突

Question

我有两个按钮，分别是 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 ，可以在这里:http://jsfiddle.net/loriensleafs/AM2a2/12/非常感谢您对我的帮助。

Answer 1

您将点击处理程序分配给这两个变量引用的元素:

epidural_analgesia_INFO
effects_of_yoga_INFO

但这两个变量都被初始化为引用document.images[0]。因此，单击该图像会触发两个处理程序。第二张图片是否应该使用索引 1 来获取第二张图像？

(顺便说一句，当您似乎使用 jQuery 时，为什么要使用 addEventListener() ？)