Question

我在某些输入中有一个蒙面的js。我正在使用它们进行电话屏蔽输入。问题是有时电话号码可能是10位数或11位数。如果选中复选框，我需要更改类。这就是我所拥有的。

这是掩码，“2”的掩码是11位数。

$(".phone").mask("(999) 999-9999");
$(".cell").mask("(999) 999-9999");
$(".phone2").mask("(999) 9999-9999");
$(".cell2").mask("(999) 9999-9999");

这是我的复选框：

<input type="checkbox" name="digits" class="digits"/>Check here if you phone numbers have 11 digits (area code included)<br>

这是我的jq（不工作，点击后班级没有变化）：

$(function(){
 $('.digits:checked').click(function(){
    if($(this).is(':checked')) 
    {
        $('.phone').addClass('phone2').removeClass('phone');
        $('.cell').addClass('cell2').removeClass('cell');
    }
 });
});

感谢。

Answer 1

只是更改指定的类不会更改指定的掩码，您需要使用新选项更新插件。

无需使用2个不同的类，您需要重置掩码。

$(function () {
    var $els = $('.phone, .cell').mask("(999) 999-9999");
    $('.digits').change(function () {
        $els.unmask();
        if (this.checked) {
            $els.mask("(999) 9999-9999");
        } else {
            $els.mask("(999) 999-9999");
        }
    });
});

演示：Fiddle

Answer 2

您错过.以使用课程digits定位元素：

$('.digits:checked').click(function(){
// ^ here ---

如果您的复选框已动态添加，请尝试使用事件委派：

$('body').on('click','digits:checked',function(){
    if($(this).is(':checked')) 
    {
        $('.phone').addClass('phone2').removeClass('phone');
        $('.cell').addClass('cell2').removeClass('cell');
    }
});

从输入中添加和删除类

2 个答案: