Question

这应该很简单，但到处都会出现意想不到的行为！

我有一个结构如下的列表

HTML

<ul class = "question-list">
    <li class="question"> something </li> 
    <li class="question"> something </li>
    <li class="question"> something </li>
    <li class="question"> something </li>
    <li class="question"> something </li> //Shouldn't this be li:last-child?
    <a class="load-more" href="#">Load More</a>
</ul>

列表默认显示5个帖子，然后在点击a.load-more时再加载5个帖子，直到加载所有帖子。加载所有帖子后，a.load-more消失。这是默认情况下呈现DOM的方式。

JS

Template.foo.onRendered( function() {
$(document).keydown(function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 74) { //Keydown J
        var listItem = $('ul.question-list > li.question');
        var listItemFirst = $('ul.question-list > li.question:first-child');
        var selectedChild =  $('ul.question-list > li.question.selected-child');

        if($('input').is(":focus")|| $('textarea').is(":focus")){
            return null; //Do not activate when input or textarea is focused
        } else {
            e.preventDefault();
            if(! $(listItem).hasClass('selected-child')){
                $(listItemFirst).addClass('selected-child'); //select first child if ul > li has no selected item
            } else
            if( $(listItemFirst).hasClass('selected-child')) {
                $(listItemFirst).removeClass('selected-child');
                $('ul.question-list > li.question:last-child').addClass('selected-child'); //if first child is selected, select last child
            } else { 
                selectedChild.removeClass('selected-child');
                selectedChild.prev().addClass('selected-child');  // if above all is not the case, select previous li
            }
        }
    }
});
});

JS做了它所评论的内容。

现在这应该可以正常工作，但我遇到了以下问题。

当离开并返回时，li选择的顺序混乱。（即，按照第二，第四，第三，第一顺序选择。当刷新时固定）
如果有更多帖子要加载，最后一个孩子将不会选择。

编辑1

问题2解决了（谢谢@Fabrizio Calderan）。我把a.load-more移出了ul。但是，当导航和返回时，选择的顺序混乱。

Answer 1

首先，从UL获取“加载更多”链接。 UL应仅包含LI元素。

然后，在keydown处理程序中，您会发现它更简单：

找到当前选中的LI元素并从中删除className“selected-child”
计算您要选择的LI的索引
使用计算的索引将className“selected-child”添加到LI。

Template.foo.onRendered( function() {
    $(document).keydown(function(e) {
        var keyCode = e.keyCode || e.which,
            c = 'selected-child',
            $listItems, $selected, index;
        if (keyCode == 74) { //Keydown J
            if($('input').is(":focus") || $('textarea').is(":focus")) {
                return;
            } else {
                $listItems = $('.question-list li');
                $selected = $listItems.filter('.' + c).removeClass(c);

                // *** to go backwards through the list ***
                index = ($selected.length == 0) ? 0 : $selected.index() - 1;
                if(index < 0) 
                    index = $listItems.length - 1;

                // *** to go forwards through the list ***
                //index = ($selected.index() + 1) % $listItems.length;

                $listItems.eq(index).addClass(c);
            }
        }
    });
});

将所选类循环到ul>李加载更多按钮

1 个答案: