Question

我有一个A-Z切换。我正在从REST API生成按字母顺序排列的ul数据。当我单击A-Z切换时，我希望正文滚动到与单击的A-Z切换字符匹配的列表项的第一个匹配项。

我尝试过以下类似的内容：

HTML：

<a href="#">A</a>

<ul>
    <li id="Afoo">Afoo</li>
    <li id="Amoar">Amoar</li>
    <li id="Apoo">Apoo</li>
</ul>

JS：

foo = ['Afoo', 'Amoar', 'Apoo'];  // this is generated elsewhere in prod code

$('a').on('click', function () { 
    var alpha = $(this).text();
    var res = [];

    for (var i=0, len=foo.length; i<len; i++) {
        if (foo[i].indexOf(alpha) === 0) {
            res.push(foo[i]);
            return res;
        }
    }

    $('body').animate({scrollTop: $("#" + res[0] + "").position().top + 24}, 650);
});

我认为问题源于我return res;的位置以及我可能会如何调用$('#' +res[0]+ '')，但我不能完全确定是否要开始排除故障。

这里是jsfiddle

感谢您的帮助

Answer 1

看起来你的问题与你在for循环中所做的事情有关。

这是一个有效的小提琴：http://jsfiddle.net/7w6yujaw/1/

只需更换＆＃34;返回res;＆＃34;用＆＃34;休息;＆＃34;

var foo = ['Afoo', 'amoar', 'apoo'];

$('a').on('click', function () {

    var alpha = $(this).text();
    var res = [];

    for (var i=0, len=foo.length; i<len; i++) {

        if (foo[i].indexOf(alpha) === 0) {
            res.push(foo[i]);
            break;
        }
    }

    $('body').animate({scrollTop: $("#" + res[0] + "").position().top + 24}, 650);
});

您也可以这样做：

var foo = ['Afoo', 'amoar', 'apoo'];

$('a').on('click', function () {

    var alpha = $(this).text();

    for (var i=0, len=foo.length; i<len; i++) {

        if (foo[i].indexOf(alpha) === 0) {

            $('body').animate({scrollTop: $("#" + foo[i] + "").position().top + 24}, 650);

            break;

        }
    }

});

从A-Z切换滚动体到阵列中的第一个项目

1 个答案: