Question

我也有一段html和js，css代码。我需要在我的函数中使用此参数AccordionElem，以便在单击时可以像带有动画的手风琴一样工作，但是如果我添加参数，我的代码就会停止。

html代码

<h1>Accordian</h1>

<a href="#" class="accordian">How do I learn about activities and events in the CS department?</a>
<p>...</p>

<a href="#" class="accordian">How do I become a section leader?</a>
<p>Please see the CS198 Website for more information about the section leading program.</p>

<a href="#" class="accordian">How many CS classes should I take this quarter?</a>
<p>Most students find that 2-3 classes is a manageable workload, but different students find different workloads comfortable. Most students find they are able to handle more CS classes per quarter as they advance in the major. For more details see the courseload recommendations webpage.</p>

<a href="#" class="accordian">How can I get a summer job or internship? How do I get a
full-time job?</a>
<p>...</p>
<a href="#" class="accordian">How do I file to graduate? Can I participate in the graduation ceremony even if I am not receiving a diploma?</a><p>...</p>

<a href="#" class="accordian">How does the Honor Code apply to CS?</a>
<p>...</p>

js代码我想以某种方式使用此cordicianEllem，以便我的代码可以正常工作。

   let createAccordian = function(accordianElem) {


let sadrzaj = accordianElem.nextElementSibling;

console.log(sadrzaj);

sadrzaj.style.transition = "max-height 0.5s ease-out";

if(sadrzaj.style.display === "block") {


/*  sadrzaj.style.maxHeight =  "0px";*/
    window.setTimeout(function () {
        sadrzaj.style.maxHeight = '0px';
    }, 50);


    window.setTimeout(function () {
    sadrzaj.style.display= 'none';
    }, 550);


    }
    else {

    sadrzaj.style.display = "block";
    sadrzaj.style.maxHeight = sadrzaj.scrollHeight + "px";

    }


      let getHeight = function () {
            sadrzaj.style.display = 'block'; 
            let height = sadrzaj.scrollHeight + 'px'; 
            sadrzaj.style.display = ''; 
            return height;
        };

        let height = getHeight(); 
        sadrzaj.style.display='block'; 
        sadrzaj.style.height = 'auto';
        sadrzaj.style.height = height; 


        window.setTimeout(function () {
            sadrzaj.style.height = '';
        }, 350);


   };


   const akordi = document.querySelectorAll('.accordian');

 const par = document.querySelectorAll('p');

 let aks = document.getElementsByClassName('accordian');
 console.log(aks);

 for( let i of par){ i.style.display = 'none';i.style.maxHeight = "0px"; }


 for( let i of akordi){           
     i.addEventListener('click',createAccordian(akordi)); }

Answer 1

事件侦听器将一个函数作为第二个参数，在该函数中，您应该通过传递参数来调用函数createAcrodian。

i.addEventListener('click', function() {
   createAccordian(i);
})

或使用ES箭头功能

i.addEventListener('click', () => createAccordian(i));

我注意到您正在遍历akordi数组，但是没有传递“ i”值（或当前循环项），但是您正在传递整个数组。如果您仍在学习，那么总是console.log值或循环运行debug只是为了了解正在发生的事情，这确实很有意义。

您可以将函数传递给这些事件侦听器，例如。

i.addEventListener('click',createAccordian);

...但是由于您要传递一些参数，因此您应该使用上述示例之一

PS。我注意到您正在使用一些母语来定义变量，我强烈建议您对所有内容都使用英语。

如何在代码中使用我的函数的参数？

1 个答案: