使用addEventListener为每个切换类编写javascript

有一个javascript处理程序；单击时，会弹出一个联系人表单以发送电子邮件。除了第一张牌，一切都可以用，但在第二张牌上它不起作用

我已经试过forEach了，但还是有些混乱

以下是预期结果和我的当前代码：

---

在我看来，您在.as_profile_小部件元素上进行了循环，并在该元素中查找.as页眉和其他元素，在当前代码cta中，页脚和箭头图标将始终相同

可以通过在元素本身上使用querySelector来实现这一点

功能${ 严格使用； 让elementsArray=document.queryselectoral.as\u profile\u小部件； 函数处理元素{ const cta=element.querySelector'.as header'； const footer=element.querySelector'.as toaster'； 常量arrowIcon=element.querySelector'.arrow down close'； //在这里添加事件侦听器和其他内容 } 元素前处理 } 使用此cta和其他内容，范围将限于您的元素卡

代码中可能有错误，而且还远未完成，但您应该能够从这里开始工作

---

注意：正如其中一条评论指出的那样，使用Jquery和本机方法混合使用是不可靠的

您在什么方面尝试了每种方法？在问题中输入当前代码。不要让我们去一个非现场的代码片段站点查看您的代码；您已经在尝试将jQuery加载到您的站点，但是您在某些地方使用了本机选择器，而在其他地方则没有。那是一种代码气味。为了保持一致性，你应该坚持其中之一，除非你有具体的理由不这样做。请重新阅读我的第一条评论。非现场可运行的代码段是可以的，只要它们不是查看逻辑的唯一方式。您的问题中也应该包含代码片段中的逻辑。

( function( $ ) {
    "use strict";

    //let elementsArray = document.querySelectorAll(".as_profile_widget");
    let asBody = $(".as-body-wrap").height();
    const cta = document.querySelector('.as-header');
    const footer = document.querySelector('.as-toaster');
    const arrowIcon = document.querySelector('.arrow-down-close');  

    function setHeight() {
        let asHeight = 0;
        //let asBody = $(".as-body-wrap");
        asHeight = asBody;
    }

    setHeight();
    $(window).resize(setHeight);


    function toggleFooter() {
        footer.classList.toggle('is-open');
        arrowIcon.classList.toggle('open');

        (footer.classList.contains('is-open') ? 
            $('.as-toaster.is-open').css('margin-top', -asBody) : 
            $(footer).css('margin-top', '') 
        );
    }
    //elementsArray.forEach(function(cta) { }); 

    cta.addEventListener('click', toggleFooter);

}( jQuery ) );