Javascript jquery按键以添加类

我正在尝试学习jquerykeypress来添加类系统

我试过下面的代码，但不起作用。我在这里用身份证试过了。当启动

#ttt1

时，背景色应该会改变，但什么也没有发生

我做错了什么，或者我需要在这里做什么？谁能告诉我

此id来自codemep.io

$(document).ready(function() {
   var ID = $(this).attr("id");
   $("#ttt" + ID).on('keypress', function() {
      if ($(this).val().length > 20) {
         $("#rb" + ID).addClass("ad");
      } else {
         $("#rb" + ID).removeClass("ad"); 
      }

   });
});

HTML

按钮
按钮

您正在函数中定义一个变量

ID

，该变量发生在

$（document）.ready（）

上。在该函数中，值

this

将指向

文档

。您需要做的是在

keypress

事件处理程序函数中定义变量

使用类进行选择，然后在处理程序函数中使用

$（this）.attr（“id”）

。您还可以使用

$（this）.closest（'div'）.next（）

获取父元素中的下一个元素

演示

$（文档）.ready（函数（）{
//此处，此值为文档对象，id无效。
$（“.test”）.on（'keyup'，function（）{
//但这里的值是发生按键事件的文本区域。
var ID=this.ID；
如果（this.value.length>20）{
$（this）.closest（'div'）.next（）.addClass（“ad”）；
}否则{
$（this）.closest（'div'）.next（）.removeClass（“ad”）；
}
});
});
.container{
保证金：0px自动；
宽度：100%；
最大宽度：500px；
位置：相对位置；
边缘顶部：100px；
}
.测试{
大纲：无；
边框：1px纯红；
宽度：100%；
最小高度：100px；
}
.br{
背景颜色：蓝色；
宽度：100px；
高度：40px；
}
.广告{
背景色：红色；
}

按钮
按钮
$（this）.attr（“id”）
此值是代码中的
''
。@guradio id值是#ttt1，1是id。这可能会让初学者感到困惑，您可以说在函数中使用
$（this）.attr（“id”）
，然后不要使用它-我知道，但有些可能会not@rejith-克里希南谢谢你的回答。但是它没有从更新的
.br
@DevStud添加
.ad
。现在检查。@DevStud在这里我们获取文本区域的父项
div.tWrp
，然后获取该分区的下一项。然后我们获取
div.br
@RejithRKrishnan我看到了您的演示，了解您在那里为addClass做了什么，但removeClass没有起作用
$（this）.closest（'div'）.next（）.removeClass（'ad”）
<div class="container">
   <div class="tWrp">
      <textarea class="test" id="ttt1" placeholder="Write"></textarea>
   </div>
   <div class="br" id="rb1">Button</div>
</div>

<div class="container">
   <div class="tWrp">
      <textarea class="test" id="ttt2" placeholder="Write"></textarea>
   </div>
   <div class="br" id="rb2">Button</div>
</div>