如何使用jQuery设置对div包装的兄弟姐妹的关注？

时间：2017-10-06 15:53:39

标签： javascript jquery

由于我无法控制的要求（无鼠标），我需要能够使用箭头键（除标签外）在网页上的一堆按钮上下滚动。

我想出了如何使用纯兄弟的按钮来做，但如果我将这些按钮包装在div中（以垂直方式堆叠它们），我的jQuery选择器就不再有效了。我基本上需要一个选择器用于我父母的下一个兄弟姐妹＆＃34;。我已经把头撞到墙上几个小时了，无法解决这个问题。

在下面的示例中，如果将焦点设置为底部的其中一个按钮，则可以使用箭头键在按钮之间移动。然而，顶部的按钮包裹在div中，箭头键不能在那里工作。

帮助？

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/button/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div class="demo-section k-content">
            <div>
                <p> 
                    This doesn't work with up/down arrow keys:
                    <div><button id="textButton1" tabIndex="0">Button 1</button></div>                                 
                    <div><button id="textButton2" tabIndex="0">Button 2</button></div>
                </p>  
                  
                <p>
                    But this does:
                    <button id="textButton3" tabIndex="0">Button 3</button>                                           
                    <button id="textButton4" tabIndex="0">Button 4</button>                  
                </p>
            </div>
          
            <script>                    
                $(document).ready(function () {
                     $("#textButton1").kendoButton();
                     $("#textButton2").kendoButton();
                     $("#textButton3").kendoButton();
                     $("#textButton4").kendoButton();
                     $(".k-button").width(350);
                     $(".k-button:first").focus();                
                });
              
                document.addEventListener('keydown', function(event) 
                {
                    const key = event.key;
                    switch (key) 
                    {
                        case "ArrowDown":   
                            //alert('Down');
                            $(".k-button:focus").next().focus();	
                            break;
                        case "ArrowUp":   
                            //alert('Up');
                            $(".k-button:focus").prev().focus();	
                            break;
                    }
                });
            </script>

            <style>
                .demo-section p {
                    margin: 0 0 30px;
                    line-height: 50px;
                }               
                .k-button {
                    margin-bottom: 20px;
                }
                 
              .k-button .k-icon {
                   float: right;
                   margin: 2px;
                }
            </style>
        </div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

当你正在使用ID我做了这个例子你可以试试。

我没有使用next和previous，但是我为每个按钮添加了一个数据键。

希望它可以帮到你

                
              $(document).ready(function () {
                   $("#textButton1").kendoButton();
                   $("#textButton2").kendoButton();
                   $("#textButton3").kendoButton();
                   $("#textButton4").kendoButton();
                   $(".k-button").width(350);
                   $(".k-button:first").focus();                
                });
              
              document.addEventListener('keydown', function(event) 
              {
              		const key = event.key;
              		switch (key) 
                  {
                			case "ArrowDown":   
                      indexKey = $(".k-button:focus").data('key')+1
                      $('#textButton'+indexKey).focus();	
                          
                  				break;
                      case "ArrowUp":   
                      indexKey = $(".k-button:focus").data('key')-1
                      $('#textButton'+indexKey).focus();	
                      		
                  				break;
              }
});
             

        
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/button/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
   <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">
            <div class="demo-section k-content">
                <div>
                    <p> 
					This doesn't work with up/down arrow keys:
					
                      <div><button id="textButton1" data-key='1' tabIndex="0">Button 1</button></div>                                 
					  <div><button id="textButton2" data-key='2' tabIndex="0">Button 2</button></div>
                    </p>  
                  
                    <p>
						But this does:
					
                        <button id="textButton3" data-key='3' tabIndex="0">Button 3</button>                                           
						<button id="textButton4" data-key='4' tabIndex="0">Button 4</button>                  
                   </p>
                  
                    
                </div>

            <style>
                .demo-section p {
                    margin: 0 0 30px;
                    line-height: 50px;
                }               
                .k-button {
                    margin-bottom: 20px;
                }
                 
              .k-button .k-icon {
                   float: right;
                   margin: 2px;
                }
            </style>
        </div>

</body>
</html>

答案 1 :(得分：1)

如您所知，next()或prev()仅适用于兄弟姐妹。对于您的情况，您可以使用按钮索引...... 

document.addEventListener('keydown', function(event) {

    const key = event.key;

    var lastButtonIndex = $(".k-button").length - 1;
    var focusedButtonIndex = $(".k-button").index($(".k-button:focus"));

    switch (key) {
        case "ArrowDown":
            if (focusedButtonIndex < lastButtonIndex)
                $(".k-button").eq(focusedButtonIndex+1).focus();
            break;
        case "ArrowUp":
            if (focusedButtonIndex > 0)
                $(".k-button").eq(focusedButtonIndex-1).focus();    
            break;
    }

});

我希望它有所帮助

相关问题
最新问题