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

Question

我正在编写一个建议框，在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';
        }
    };

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

编辑：

      switch (e.keyCode) {
            // determine how the box highlighting will shift
            case 38:
                // the user has presssed the up arrow
                console.log('up');
                this.setHighlight(spans, lit, 1);
                break;

            case 40:
                // the user has pressed down
                console.log('down');
                this.setHighlight(spans, lit, -1);
                break;

那是呼叫开关。 HTML只是

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

Answer 1

我感觉到它与您设置lit变量的方式有关，在我的实验过程中，我还注意到您可能在keyCode switch语句中change变量设置了错误的方式，并且我也切换了测试中的初始高亮显示未定义的lit更有意义。 我还假设在定义lit时，它是一个整数。

无论如何，插入您的代码并填补空白，我设法使此工作成功完成。 首先，HEAD部分中的CSS：

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

接下来，HEAD部分中的Javascript：

<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>

最后，在BODY部分中添加了一些愚蠢的HTML，可使其全部正常工作：

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

<div id="span_container">
    <span>one</span><br />
    <span>two</span><br />
    <span>three</span><br />
    <span>four</span><br />
    <span>five</span><br />
</div>

希望这可以帮助！ :)