javascript - 根据输入 slider 递归显示/隐藏 li 元素

Question

我正在尝试根据输入 slider 显示/隐藏 x 个 li 元素。我尝试使用一种算法来实现此目的，该算法循环遍历 li 元素的数量，然后根据输入 slider 递归循环遍历差异的数量。

这是我目前拥有的:

/*  updateList
*   @param the event elemenet (input range)
*   @param range value, number of words to display
*/
function updateList(el, range) {
    var originalList = el.srcElement.nextSibling.nextElementSibling.getAttribute("data-value");
    var diff = originalList - range;
    var ul = el.srcElement.parentNode.children[1];

    // for amount of differences
    for (var li = originalList; li > -1; li--) {
        for (var y = 0; y < diff; y++) {
            ul.children[li].style.display = "none";
        }
    }
}

这是一个JSbin 。任何帮助或建议表示赞赏。

Answer 1

只需更改您的代码

// for amount of differences
for (var li = originalList; li > -1; li--) {
    for (var y = 0; y < diff; y++) {
        ul.children[li].style.display = "none";
    }
}

到此

// for amount of differences
for (var i=0; i<originalList; i++) {
    ul.children[i].style.display = (i<range) ? "":"none";
}

看看这个 PEN看看它的实际效果。