使用上下箭头键在UL LI列表中滚动

Question

我真的需要你的帮助，

由于某些奇怪的原因，我似乎无法同时使用向上和向下箭头键来更改UL列表中的选定LI。

这是有问题的jQuery：

$(this).on('keyup', function(e) {

if (e.which == 39) {      
$('ul li.refdoc_selected', this).next().addClass("refdoc_selected").siblings().removeClass("refdoc_selected")
}

if (e.which == 37) {      
$('ul li.refdoc_selected', this).prev().addClass("refdoc_selected").siblings().removeClass("refdoc_selected")
}
    });

这是完整的标记：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<link rel="stylesheet" href="jquery-ui.css" type="text/css"/>

<style type="text/css">
.refdoc_selected {
    background-color: rgb(10,36,106);
    color: #FFF;
}
</style>

<script type="text/javascript">

function showDialog() {

var refdocs = [12256363,96415678,96857456,12236748]

            var markup ='<div style="margin-bottom: 2px;">' +
                            '<p style="margin: 0; padding:0;">' +
                                '<input style="margin-top: 1px; margin-right: 2px" float: left;" id="refdocs_input" type="text" class="field_outline inputbox">'+    
                                '<button id="btn_add_refdoc" class="button" style="margin-right: 2px;"><img style="width: 14px;" src="images/icon_check.png"></button>'+
                                '<button id="btn_del_refdoc" class="button" style="margin-right: 2px;"><img src="images/icon_delete.png"></button>'+
                                '<button id="btn_empty_refdocs" class="button" style="margin-right: 2px;"><img src="images/icon_trash.png"></button>'+
                            '</p>'+
                        '</div>'+
                        '<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;">'+
                        '<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;"></ul>'+
                        '</div>'

            $('<div></div>').dialog({
                modal: false,
                title: "Reference Documents",
                width: 350,


                open: function () {

                    $(this).html(markup)

                    for (var i = 0; i < refdocs.length; i++){   
                        $("#refdocs_list").append('<li style="background-image: url(images/icon_doc.png); background-repeat: no-repeat; background-position: 0 50%; padding: 4px 0 2px 16px;">'+ refdocs[i] +'</li>')
                    }


                     $("#refdocs_list li").click(function() {
                       $(this).addClass("refdoc_selected").siblings().removeClass("refdoc_selected")
                        document.getElementById('refdocs_input').value = $(this).text()
                     });

                    $(this).on('keyup', function(e) {


                        if (e.which == 39) {      
                            $('ul li.refdoc_selected', this).next().addClass("refdoc_selected").siblings().removeClass("refdoc_selected")
                        }

                        if (e.which == 37) {      
                            $('ul li.refdoc_selected', this).prev().addClass("refdoc_selected").siblings().removeClass("refdoc_selected")
                        }


                    });


                },
                close: function(){
                     $(this).remove();
               },
               buttons: [
                {
                    text: "CLOSE",
                    "class": 'button',
                    click: function() {

                        $(this).dialog("close")
                    }
                },
                {
                    text: "CANCEL",
                    "class": 'button',
                    click: function() {
                        $(this).dialog("close")
                    }
                }
            ]


            });//end dialog 
}
</script>

</head>

<body>

<input type="button" onclick="showDialog()" value="test">

</body>

</html>

Answer 1

用这个：

                    if (e.keyCode == 38) {
                      var s = $('ul li.refdoc_selected', this)

                      if (s.prev().length == 0) {
                        $('ul > li:last').addClass('refdoc_selected')
                      } else {
                        s.prev().addClass('refdoc_selected')
                      }

                      s.removeClass('refdoc_selected')
                    }

                    if (e.keyCode == 40) {
                      var s = $('ul li.refdoc_selected', this)

                      if (s.next().length == 0) {
                        $('ul > li:first').addClass('refdoc_selected')
                      } else {
                        s.next().addClass('refdoc_selected')
                      }

                      s.removeClass('refdoc_selected')
                    }

使用上下箭头键在UL LI列表中滚动

问题描述

1 个解决方案

解决方案1
0 2016-10-25 16:55:29

使用上下箭头键在UL LI列表中滚动

问题描述

1 个解决方案

解决方案1 0 2016-10-25 16:55:29

解决方案1
0 2016-10-25 16:55:29