Javascript 将范围滑块设置为min='；1'；和max='；16'；并将其输出1到4四次

我试图找出如何修改最小值为1、最大值为16的输入/范围滑块的值，以输出1-2-3-4（然后当范围滑块达到值5时，模式重复）1-2-3-4（然后当模式达到值9时，模式重复）1-2-3-4。。。。等。当向后移动范围滑块时，这也应起作用

我之所以要这样做，是为了创建一个包含4个div的列表，如果div的id与div高亮显示的范围滑块值的数目匹配，那么该列表将包含4个div。我之所以在范围滑块中使用数字16而不是4，是因为我需要另一个包含四个div的列表，其中每个div仅在范围滑块的每个“1”上高亮显示

问题是，如果我为一个100的div列表编写这个程序，那么编写一个switch语句并不能解决这个问题。所以我很好奇，如果我想扩大规模，如果没有一个，怎么能解决这个问题

这里是对html/css/js的修改

当然，只要使用

---

对于第二行，我建议更改为：

I=I？i:4

或更好使用or:

i=i | | 4

@TaoistWA没有问题。如果你有空闲时间阅读数学链接，它会在路上派上用场。@Hamatti哇，我一定比我想象的要累（现在是凌晨2点）。把它放在第一行。谢谢你的建议！我知道算符，只是数学想象不好。我直觉上也知道这会很简单。@TaoistWA我知道你来自哪里，我花了很长时间才理解

mod

，并实际思考/使用它。我相信你会掌握窍门的！

var slider = document.getElementById('slider');

    var i;

slider.onchange = function() {
    i = slider.value;

     console.log(typeof i);
    $('.inner-loop').removeClass('inner-loop-selected');

        switch (i) {
            case "5":
                i = "1";
                break;
            case "6":
                i = "2";
                break;
            case "7":
                i = "3";
                break;
            case "8":
                i = "4";
                break;
            case "9":
                i = "1";
                break;
            case "10":
                i = "2";
                break;
            case "11":
                i = "3";
                break;
            case "12":
                i = "4";
                break;
            case "13":
                i = "1";
                break;
            case "14":
                i = "2";
                break;
            case "15":
                i = "3";
                break;
            case "16":
                i = "4";
                break;
          }



    var innerDiv = document.getElementById('inner-' + i);
    console.log(innerDiv.id);
    innerDiv.className +=' inner-loop-selected' ;




};

    i = (parseInt(slider.value, 10) % 4) || 4;