Question

查看截图。左/右选择使用firstElementSibling / previousElementSibling完成。当按下底部/顶部键时，如何找到底部或顶部的行项目？

用例1：当当前选择为“2”并按下向下箭头键（40 keyCode）时，我需要选择7.如果第7项具有相同的大小，则必须选择8项。

如果当前选择为4且按下向下键 - 则必须选择第9项。

用例2：同样，如果当前选择为10并且按下向上箭头键，则需要选择第5项。

以下输出的当前实现：工作演示：http://neudesicindia.github.io/SDTV-App/

<ul class="tiles clearfix">
    <li>1</li>
    <li id="item-selected">2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li>
    <li>12</li> 
    <li>13</li> 
    <li>14</li> 
    <li>15</li> 
    <li>16</li> 
</ul>

的JavaScript

(function (window, document, undefined) {
    var apps = function(){},
        keyChar,
        currElm = document.getElementById("item-selected"),
        futureElm;

    apps.route = {
        desc: "route for app nav."
    };

    apps.route.NavigateLeft = function (elm) {
        elm.setAttribute("id", "");
        elm.previousElementSibling ? futureElm = elm.previousElementSibling : futureElm = elm.parentElement.lastElementChild;
        futureElm.setAttribute("id", "item-selected");
    };

    apps.route.NavigateRight = function (elm) {
        elm.setAttribute("id", "");
        elm.nextElementSibling ? futureElm = elm.nextElementSibling : futureElm = elm.parentElement.firstElementChild;
        futureElm.setAttribute("id", "item-selected");
    };

    apps.route.NavigateTop = function (elm) {
    };

    apps.route.NavigateBottom = function (elm) {
    };


    document.addEventListener("keyup", function (e) {

        keyChar = e.keyCode;
        currElm = document.getElementById("item-selected");

        console.log(keyChar);

        switch (keyChar) {
            case 38:
                apps.route.NavigateTop(currElm);
                break;

            case 40:
                apps.route.NavigateBottom(currElm);
                break;

            case 37:
                apps.route.NavigateLeft(currElm);
                break;

            case 39:
                apps.route.NavigateRight(currElm);
                break;

            case 13:
                apps.route.Play(currElm);
                break;

            default:
                break;
        }

    }, false);

})(window, document);

预览

enter image description here

Answer 1

我认为你的例子当前的方法有一些问题，尤其是没有十一点。话虽如此，让我尽力回答。

对于高级别模糊的回答，请允许我说，您应该将布局抽象为某种模型然后对其进行操作，并相应地更新UI。

对于一个糟糕的例子，你的布局模型可能看起来像这样

var layout = [
              1, 2, 3, 4, 5, 6,
              7, 7, 8, 9,10,12,
              7, 7,13,14,15,16
              ];

然后，您可以通过左/右增加/减少1以及向上和向下增加/减少列来移动布局。

当然，该模型会假设布局总是那样......但是当然，对于示例中的css，我认为无论如何都要更灵活的布局会更加困难。

我可能会在这里给你一个不好的例子来说明我的意思：

SDTV Example for StackOverflow

通过这种方式，您不必从DOM中查找信息，而只是从模型中更新DOM。希望有所帮助。

如何在顶部/底部箭头键上找到下一个/上一个行项？

1 个答案: