Question

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

我想我可以从字段中获取数字，然后循环通过removeClass指令从quesiton中的元素中移除类（ids与输入的数字相关），如下所示：

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;}

我的具体问题：

我想根据用户输入字段的数字从带有编号ids的元素中删除类 - 我上面尝试的方法不起作用，你知道它的错误以及如何使它工作？谢谢

Answer 1

这里和那里有一些拼写错误，小提琴没有正确设置

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的答案，为了提高效率，你可以看看他的答案

Answer 2

@Huangism击中头部。

然而，循环可能非常昂贵。考虑使用以下方法：

    $("#color_number").on('input', function(){
        var i = this.value;
        $('p[id^=c]').addClass('hidden')
        .filter(function() {
            return this.id.slice(1) >= i;
        })
        .removeClass('hidden');
    })
    .trigger('input');

DEMO

Answer 3

@Huangism澄清了主要问题。

然而，我会稍微改变代码的逻辑，因为在当前的形式中，它会花费某人一个巨大的浏览器延迟 - 如@PeterKA循环所提到的可能是昂贵的（不受控制的循环，就像在问题中）。

接下来就是我会反转循环，因为现在它显示了从最后到第一个的字段（只有两个字段可见，它们将是#c1和#c5）。

最后一件事是事件。我会使用input（与@PeterKA一样），因为它是一个字段type="number"并且有自己的+/-控件。

var inputs = $('input.color:not([name="color_0"])');
$("#color_number").on('input', function(){
    $.isNumeric($(this).val()) || $(this).val('2');
    var number = parseInt($(this).val()),
        l = inputs.length + 1;
    var i = number < l ? number : l;
    inputs.parent().addClass('hidden');
    while(i > 1){
        $("#c"+ i).removeClass("hidden");   
        i--;
    }
});

JSFiddle

Answer 4

您需要使用$（“＃color_number”）而不是$（“color_number”）

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

4 个答案: