时间戳

首页 > 解决方案 > javascript 每个带有 addEventListener 的切换类

javascript - javascript 每个带有 addEventListener 的切换类

问题描述

有一个javascript处理程序；当您单击时，会弹出一个联系表单以发送电子邮件。一切正常，但对第一张卡，在第二张卡上不起作用。

我已经尝试过forEach，但仍然有些混乱

这是预期的结果和我当前的代码：https ://codepen.io/shkasjon/pen/JjYmgyP

( 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 ) );

标签： javascript

解决方案

在我看来，您在当前代码中对元素进行了循环，并在.as_profile_widget该元素中查找.as-header和其他内容，并且将始终相同ctafooterarrowIcons

您可以通过querySelector在元素本身上使用来做到这一点

(function( $ ) {
 "use strict";

 let elementsArray = document.querySelectorAll(".as_profile_widget");

 function process(element) {
    const cta = element.querySelector('.as-header');
    const footer = element.querySelector('.as-toaster');
    const arrowIcon = element.querySelector('.arrow-down-close'); 

    // Add event listener and other stuff here
 }
 elementsArray.forEach(process)

})

有了这个cta和其他将被限制在你的元素（卡）

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

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

推荐阅读