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变量的方式有关，在我的实验过程中，我也注意到您的change变量可能设置错误在你的keyCode开关语句中，我还在测试中切换了初始突出显示未定义的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>

希望这有帮助！：）

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

1 个答案: