Question

我有div扩展和缩回以显示/隐藏内容。我正在button使用addEventListner来显示/隐藏div。我有一个div我想要显示/隐藏以及多个显示/隐藏button。因此，我试图重用显示/隐藏内容但使用不同事件处理程序的相同两个函数。

我遇到的问题是将相关的div id传递给函数，以便函数知道每个函数调用显示/隐藏哪个div元素。 function会在第一次互动时识别出div id，但在setTimeout召回时，div id不再被识别。我已经尝试将用于div id的变量添加到setTimeout而没有任何乐趣。

我知道我可以使用内联javascript，但我正在努力避免这种情况。

我正在尝试使用外部JavaScript来解决这个问题的任何想法吗？

HTML：

<button id='expand'>expand</button><button id='retract'>retract</button>
<div id="latinText">
    <p>...some content here</p> 
</div>
<button id='expandToo'>expandToo</button><button id='retractToo'>retractToo</button>
<div id='latinText2'>
    <p>...some more content here</p> 
</div>

使用Javascript：

function divExp(elem) {
    var element = document.getElementById(elem);
    var h = element.offsetHeight;
    var scrollHeight = element.scrollHeight;
    var divTimer = setTimeout(divExp, 20);
    if(h < scrollHeight) {
        h += 5;
    } else {
        clearTimeout(divTimer);
    }
    element.style.height = h+'px' ;
}

function divRetract(elem2) {
    var element = document.getElementById(elem2);
    var h = element.offsetHeight;
    var retTimer = setTimeout(divRetract, 20);
    if(h > 0) {
        h -= 5;
    } else {
        clearTimeout(retTimer);
    }
    element.style.height = h+'px' ;
}

document.getElementById('expand').addEventListener('click', function(){   divExp('latinText'); }, false);
document.getElementById('retract').addEventListener('click',function (){   divRetract('latinText') }, false);
document.getElementById('expandToo').addEventListener('click', function(){ divExp('latinText2'); }, false);
document.getElementById('retractToo').addEventListener('click',function(){     divRetract('latinText2'); }, false);

Answer 1

我不确定我是否完全理解问题是什么，但听起来你需要将参数传递给你想用setTimeout调用的函数？

var retTimer = setTimeout(function() {
  divRetract(elem2)
}, 20);

Answer 2

你应该写

var divTimer = setTimeout(function(){divExp(elem)}, 20);

而不是

var divTimer = setTimeout(divExp, 20);

比你将相同的元素传递给一个函数，由超时调用。否则，调用不带参数的divExp（）函数

使用setTimeout和addEventListener来调用具有相同元素的函数

2 个答案: