Question

我试图根据输入滑块显示/隐藏x个li个元素。我尝试使用循环遍历li元素量的算法来执行此操作，然后基于输入滑块递归循环遍历差异量。

这就是我目前所拥有的：

/*  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

只需更改您的代码

'EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' or one of its dependencies. The system cannot find the file specified

到这个

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

查看此PEN以查看其实际效果。

Answer 2

我只修改了两个函数，如下所示

function eventListener(el) {
  el.addEventListener('change', function(e) {
      updateList(e.target, el.value);
  });
}

和

function updateList(el, range) {
    var ul = el.nextSibling.nextElementSibling;
    var ul_num = ul.getAttribute("data-value");

    for (var i = 0; i < ul_num; i++) {
        ul.children[i].style.display = "block";
        if ( i+1 > range) {
            ul.children[i].style.display = "none";
        }
    };
}

jsFiddle

基于输入滑块递归显示/隐藏li元素

2 个答案: