정말 당신의 도움이 필요

, 나는 모두 위쪽 및 아래쪽 화살표 키를 변경하는 얻을 수있을 수없는 것 UL 목록에서 선택된 LI.

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

출처

2016-10-25 BobbyJones

사용이 :

    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') 
        }

$(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") 
} 
    });

가 완료 마크 업입니다 : 여기

문제의 jQuery를하다

출처

2016-10-25 16:55:29 BobbyJones

답변

관련 문제