0

使用以下脚本，单击 PREV 时，我无法快速将数组的焦点设置回列表中。

它应该像这个例子一样工作：

http://jsfiddle.net/QAsQj/2/

我的代码在这里

http://jsfiddle.net/Eq4js/

你能指出我在这里做错了什么吗，我将不胜感激代码示例

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            .focus { color: red; }
        </style>

        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>  

        <script>
            $(document).ready(function() {
                var snippet = {
                    index: 0,
                    indexNew: 0,
                    start: 0,
                    $el: 'div.snippet-categories',
                    config: {
                        itemsVisible: 4
                    },
                    data: {
                        items: {
                            models: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
                        }
                    },
                    navigate: function(direction) {
                        if (direction === 'right') {
                            if (this.index < this.config.itemsVisible - 1) {
                                if (this.index < this.config.itemsVisible - 1) {
                                    this.index++;
                                    var result = '#' + this.index + '';
                                    $('li.focus').removeClass('focus');
                                    $(result).addClass('focus');
                                } else {
                                    this.start++;
                                }
                            } else {

                                if (this.start < this.data.items.models.length - this.config.itemsVisible) {
                                    this.start++;
                                    this.renderItems();
                                    var result = '#' + (this.config.itemsVisible - 1 + this.start) + '';
                                    $('li.focus').removeClass('focus');
                                    $(result).addClass('focus');
                                }
                            }
                        }

                        else if (direction === 'left') {
                            if (this.index > this.config.itemsVisible - 1) {
                                if (this.index > this.config.itemsVisible - 1) {
                                    this.index--;
                                    (Focus.to(this.getFocusable(-1, true)));
                                } else {
                                    this.start++;
                                }
                            } else {
                                if (this.start > this.data.items.models.length - this.config.itemsVisible) {
                                    this.index--;
                                    this.renderItems();
                                } else {
                                }
                            }
                        }
                    },
                    render: function() {
                        this.renderItems();
                    },
                    renderItems: function(reverse) {
                        var reverse = reverse || false;
                        var html = '', result = '', subset = null;
                        var range = this.data.items.models;
                        var limit = range.length - this.config.itemsVisible;
                        if (this.indexNew !== null) {
                            if (reverse === false) {
                            } else {
                            }
                            subset = range.slice(this.start, this.start + this.config.itemsVisible);
                            var i = 0;
                            while (i < subset.length) {
                                var x = subset[i];
                                result += '<li id="' + this.data.items.models[x] + '" data-idx="' + this.data.items.models[x] + '" class="focusable">' + this.data.items.models[x] + '</li>';
                                i++;
                            }

                            html = result + '</ul>';
                            var el = $(this.$el);
                            el.empty();
                            el.append(html);
                        } else {
                            console.log('limit STOP');
                        }
                    },
                };

                snippet.render();

                $('#next').click(function() {

                    snippet.navigate("right");

                });
                $('#prev').click(function() {
                    snippet.navigate("left");
                });
            });
        </script>
    </head>
    <body>
        <div class="snippet-categories"></div>
        <div id="prev">prev</div>
        <div id="next">next</div>
    </body>
</html>

这个问题与

你能解决吗？使用数组的 JavaScript 轮播实现

4

1 回答 1

0

最后我解决了

算法示例在这里 http://jsfiddle.net/QwATR/

Snippet_Categories = (function(Snippet) {

    var Snippet_Categories = function() {
        this.config = {
            curPos: 0, // index for selected element
            itemVisible: 4, // number of items visible
            minIndex: 0, // define visible area start
            maxIndex: 4 - 1, // define visible area end  = "itemVisible -1"
            outItems: 0                     // number of element out of visible area
        };
        this.data = {
            items: arguments[1].items
        };
        this.construct.apply(this, arguments);
    };

    $.extend(true, Snippet_Categories.prototype, Snippet.prototype, {
        init: function() {
            this.index = 0;     // set default index
            this.indexNew = 0; // set next index 
            this.start = 0;
            this.render();
        },
        create: function() {
            return this.parent.$el.find('.snippet-categories');
        },
        removeFocus: function() {
            var test = $('li.focus');
            Focus.blur(test);
            //$('li.focus').removeClass('focus');
        },
        focus: function() {

            //$('ul > li:eq(' + this.config.curPos + ')').addClass('focus');
            var test = $('ul > li:eq(' + this.config.curPos + ')');

            return Focus.to(test, true);
        },
        render: function() {
            //debugger
            this.renderItems();
            this.focus();
        },
        renderItems: function() {
            var html = '<ul>';
            for (var i = 0; i < this.config.itemVisible; i++) {
                html += '<li data-idx="' + this.data.items.at(i + this.config.outItems).get('id') + '" class="">' + this.data.items.at(i + this.config.outItems).get('label') + '</li>';
            }
            html += '</ul>';
            $('.snippet-categories').empty();
            $('.snippet-categories').html(html);
        },
        navigate: function(direction) {
            if (direction === 'right') {
                if (this.config.curPos < this.config.maxIndex)
                {
                    this.removeFocus();
                    if (this.config.curPos < this.config.maxIndex)
                        this.config.curPos++;
                    else
                    {
                        this.config.outItems++;
                    }
                } else {
                    if (this.config.outItems < this.data.items.length - this.config.itemVisible)
                        this.config.outItems++;
                }
                this.renderItems();
                this.focus();
            }
            else if (direction === 'left') {
                if (this.config.curPos > this.config.minIndex)
                {
                    this.removeFocus();
                    if (this.config.curPos > this.config.minIndex)
                        this.config.curPos--;
                    else
                    {
                        this.config.clicks--;
                    }
                } else {
                    if (this.config.outItems > 0)
                        this.config.outItems--;
                }
                this.renderItems();
                this.focus();
            }
        },
        onFocus: function() {
            //this.index = parseInt(Focus.focused[0].dataset.idx, 10);
            console.log('element in focus ' + this.index);
        }
    });

    return Snippet_Categories;

})(Snippet);
于 2013-08-11T17:01:00.667 回答