jQuery的按键添加类 [英] jquery keypress to add class

问题描述

我正在尝试学习jquery按键来添加类系统.

I am trying to learn jquery keypress to add class system.

我尝试了以下代码，但是没有用.我在这里尝试了一个ID.当启动#ttt1时，#rb1背景色应该改变，但是什么也没有发生.

I have tryed the following code but it doesn't worked. I have tryed with an ID here. When started the #ttt1 then the the #rb1 background color should change but nothing happened.

我做错了什么或我需要在这里做什么?有人可以告诉我吗?

What i am doing wrong or what i need to do here? Anyone can tell me ?

此id DEMO from codemep.io

This id DEMO from 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

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

推荐答案

您正在在$(document).ready()上发生的函数内定义变量ID.在该函数内部，值this将指向document.您需要做的是在keypress事件处理函数中定义变量.

You are defining a variable ID inside a function which occurs on $(document).ready(). Inside that function the value this will point to the document. What you need to do is to define the variable inside the keypress event handler function.

使用类进行选择，然后在处理函数中使用$(this).attr("id").您也可以使用$(this).closest('div').next()获取父元素中的下一个元素.

Use class for selection and then use $(this).attr("id") inside the handler function. Also you can use $(this).closest('div').next() to get the next element in the parent.

演示

$(document).ready(function() {
   //here  value for this is the document object and the id is not useful.
   $(".test").on('keyup', function() {
     //but here value for this is textarea where keypress event happened.
      var ID = this.id;
      if (this.value.length > 20) {
         $(this).closest('div').next().addClass("ad");
      } else {
         $(this).closest('div').next().removeClass("ad"); 
      }
   });
});

.container {
   margin:0px auto;
   width:100%;
   max-width:500px;
   position:relative;
   margin-top:100px;
}

.test {
   outline:none;
   border:1px solid red;
   width:100%;
   min-height:100px;
}
.br {
   background-color:blue;
   width:100px;
   height:40px;
}
.ad {
   background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>

这篇关于jQuery的按键添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！