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

Question

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

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代码我想以某种方式使用此 accordianEllem，以便我的代码可以工作。

   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 值或在循环中运行调试以了解正在发生的事情真的很有意义。

你可以将你的函数传递给这些事件监听器，例如。

i.addEventListener('click',createAccordian);

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

附言。我注意到您正在使用一些您的母语来定义变量，我强烈建议您使用英语来定义变量。