1

我正在处理一个模板文件，并且有 3 个列表项，当您为每个加载隐藏的 div 翻转突出显示的文本时，这些列表项变为可见。鼠标移出时会在 div 再次隐藏之前设置延迟。clearTimeout 用于如果用户在列出的项目之间移动，则新选择的 div 会加载，而旧的 div 会再次隐藏。我有脚本工作，这就是我需要帮助的原因。当您从底部项目向上滚动项目时， clearTimeout 就像我想要的那样工作，但是如果您从第一个项目向下滚动，它根本不会清除超时。

<script>function myClear1()
{
    clearTimeout(myFunction1, myFunction2, myFunction3);
    }
function myFunction1()
{
setTimeout(function(){document.getElementById('relatedproduct1').style.display = 'none';},500);
}
function myFunction2()
{
setTimeout(function(){document.getElementById('relatedproduct2').style.display = 'none';},500);
}
function myFunction3()
{
setTimeout(function(){document.getElementById('relatedproduct3').style.display = 'none';},500);
}
</script>

这些是脚本，下面我将添加页面上使用它的代码。

<form class="relatedcheckboxes">
<input type="checkbox" class="relatedcheckboxes">
<div style="display:inline;cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct1').style.display = 'block'; document.getElementById('selectedProductsGroup').style.display ='none'; myClear1()"onmouseout="myFunction1()">Product Number:</div> Product Name - Sale Price
<br>
<input type="checkbox" name="Product Name" value="" class="relatedcheckboxes">
<div style="display:inline; cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct2').style.display = 'block';document.getElementById('selectedProductsGroup').style.display ='none';myClear1()"onmouseout="myFunction2()">Product Number</div>: Product Name - Sale Price
<br />
<input type="checkbox" name="Product Name" value="" class="relatedcheckboxes">
<div style="display:inline; cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct3').style.display = 'block';  myClear1()"onmouseout="myFunction3()">Product Number</div>: Product Name - Sale Price
</form>
4

1 回答 1

3

您必须传递 to 的返回值，setTimeout而clearInterval不是您的函数。例如：

var timer = setTimeout(func, 1000);
clearTimeout(timer);

以最小的更改调整您的代码将是这样的：

var timer1;
function myClear1(){
    clearTimeout(timer1);
}
function myFunction1() {
    return setTimeout(function(){
        document.getElementById('relatedproduct1').style.display = 'none';
    },500);
}

<div onmouseover="myClear1()" onmouseout="timer1=myFunction1()">...</div>...
于 2013-07-15T17:43:43.247 回答