JavaScript在onkeyup函数之后自动取消设置元素类

我正在编写一个建议框，在onkeyup函数通过更改类来设置跨度的背景之后，该类就消失了。它将在一个箭头键上闪烁背景一秒钟，然后取消类的设置。我从未见过这种行为，也不知道如何修复它。为什么在函数返回后类会变得未设置

 this.setHighlight = function(spans, lit, change) {
        if (lit == undefined) {
            // we know it's the first highlight    
            if (change == 1) {
                spans[spans.length - 1].className = 'highlight';
            }
            else if (change == -1) {
                spans[0].className = 'highlight';
            }
        }
        else {
            // remove the old highlight
            spans[lit].className = '';
            // set the new highlight
            spans[lit + change].className = 'highlight';
        }
    };

脚本中有一部分用于设置名称，它是从处理按键事件的脚本中较低的开关调用的

编辑：

那是呼叫开关。html只是

<input type="text" name="whatever" onkeyup="getSuggest(this, 'suggest_type', event)" />

---

我感觉这与您设置

lit

变量的方式有关，在我的实验中，我还注意到您可能在

keyCode

开关语句中错误地设置了

change

变量，我还将测试中的初始高亮显示切换为未定义的

lit

，以使其更有意义。我还假设定义时，

lit

是一个整数

不管怎样，插入您的代码并填空，我成功地使它工作。首先，头部部分的CSS：

<style type='text/css'>
    .highlight
    {
        font-weight: bold;
        border: 1px solid #333333;
    }
</style>

<script type='text/javascript'>

    var lit = undefined;

    function getSuggest(element, str, e)
    {
        var container = document.getElementById("span_container");
        var spans = container.getElementsByTagName("SPAN");

        for (var i=0; i<spans.length; i++)
        {
            if (spans[i].className == "highlight")
            {
                lit = i;
                break;
            }
        }

        switch (e.keyCode)
        {
            // determine how the box highlighting will shift
            case 38:
                // the user has pressed up
                setHighlight(spans, lit, -1);
                break;

            case 40:
                // the user has pressed down
                setHighlight(spans, lit, 1);
                break;
        }
    }

    function setHighlight(spans, lit, change)
    {
        if (lit == undefined)
        {
            // we know it's the first highlight    
            if (change == 1)
            {
                spans[0].className = 'highlight';
            }
            else if (change == -1)
            {
                spans[spans.length - 1].className = 'highlight';
            }
        }
        else
        {
            // remove the old highlight
            spans[lit].className = '';

            // set the new highlight
            var new_lit = (lit + change);
            if (new_lit >= spans.length)
                new_lit = 0;
            else if (new_lit < 0)
                new_lit = spans.length - 1;

            spans[new_lit].className = 'highlight';
        }
    }

</script>

.亮点
{
字体大小：粗体；
边框：1px实心#333333；
}

接下来，头部部分中的Javascript：

<style type='text/css'>
    .highlight
    {
        font-weight: bold;
        border: 1px solid #333333;
    }
</style>

<script type='text/javascript'>

    var lit = undefined;

    function getSuggest(element, str, e)
    {
        var container = document.getElementById("span_container");
        var spans = container.getElementsByTagName("SPAN");

        for (var i=0; i<spans.length; i++)
        {
            if (spans[i].className == "highlight")
            {
                lit = i;
                break;
            }
        }

        switch (e.keyCode)
        {
            // determine how the box highlighting will shift
            case 38:
                // the user has pressed up
                setHighlight(spans, lit, -1);
                break;

            case 40:
                // the user has pressed down
                setHighlight(spans, lit, 1);
                break;
        }
    }

    function setHighlight(spans, lit, change)
    {
        if (lit == undefined)
        {
            // we know it's the first highlight    
            if (change == 1)
            {
                spans[0].className = 'highlight';
            }
            else if (change == -1)
            {
                spans[spans.length - 1].className = 'highlight';
            }
        }
        else
        {
            // remove the old highlight
            spans[lit].className = '';

            // set the new highlight
            var new_lit = (lit + change);
            if (new_lit >= spans.length)
                new_lit = 0;
            else if (new_lit < 0)
                new_lit = spans.length - 1;

            spans[new_lit].className = 'highlight';
        }
    }

</script>

var-lit=未定义；
函数getSuggest（元素、str、e）
{
var container=document.getElementById（“span_container”）；
var SPAN=container.getElementsByTagName（“SPAN”）；
对于（var i=0；设置事件处理程序的代码，可能还有相关的HTML，将非常有趣。如果激活
onfocus
event，在聚焦后高亮显示相关元素，会不会更容易？@ChrisKempen在这里不起作用，因为我使用的是需要用箭头键入的span元素键。不会发生任何事情来触发对跨度的关注。哦，我明白了！我很抱歉…我将投票支持@Pointy的评论，因为-除了为您重新编写解决方案而不帮助您解决实际问题之外-我不确定问题可能出在哪里…关于使用jQuery让生活更轻松一点的想法？是的，我也不知道。我喜欢为这些问题编写自己的解决方案，以前从未遇到过这样的问题。我的直觉告诉我这是某种范围界定或参考问题，但我就是找不到。这是所有相关的代码。函数的唯一其他部分只是从DB检索建议。这里有些东西让一切都绊倒了向上的