jquery - 使用 jQuery 循环/递增 id 从多个元素中删除类

Question

我试图根据用户在字段中输入的数字从多个后续元素中删除“隐藏”类:

我想我可以从字段中获取数字，然后循环执行removeClass指令以从问题中的元素中删除该类(ID与输入的数字相关)，如下所示:

(Alternatively here in jsfiddle form)

HTML

How many colors? :<input id="color_number" type="number" max="5" min="2" name="color_number" value="2" />

        <p>
            Starting colour:
            <input name="color_0" class="color">
        </p>    

            <p id="c2" class="">
                Next colour:
                <input name="color_1" class="color">
            </p>    
            <p id="c3" class="hidden">
                Next colour:
                <input name="color_2" class="color">
            </p>    
            <p id="c4" class="hidden">
                Next colour:
                <input name="color_3" class="color">
            </p>
            <p id="c5" class="hidden">
                Next colour:
                <input name="color_4" class="color">
            </p>

jQuery:

$("color_number").keyup(function(){         
    var number = $( "#color_number" ).val();
    var i = number;
    while(i < 5){
        $(["#c"+ i]).removeClass("hidden"); 
        i++;
    }
});

CSS

.hidden {display:none;}

我的具体问题:

我想根据用户在字段中输入的数字从具有编号 id 的元素中删除类 - 我上面尝试过的方法不起作用，你知道它有什么问题以及如何使其工作吗？谢谢

Answer 1

这里那里有一些拼写错误， fiddle 设置不正确

https://jsfiddle.net/du2wotbr/2/

    $("#color_number").keyup(function () {
        var i = $(this).val();
        while (i < 5) {
            $("#c" + i).removeClass("hidden");
            i++;
        }
    });

$("color_number") 应为 $("#color_number")

$(["#c"+ i]) 应该是 $("#c"+ i)

在您的本地，此代码应该位于文档中

如PeterKA的回答，为了效率，你可以看看他的回答