Question

以下代码是将css类添加到元素，但此代码会将此类添加到表单中的所有元素。

$("#user_text").change(function(){

  if($("#user_text").val().length <= 6){
    $("div").addClass("has-error");
  }else{
    $("div").addClass();
  }
});

我的表单中还有5个元素，但我希望此代码仅适用于特定元素。这是它的HTML代码：

<div class="form-group">

      <label class="col-xs-4 control-label" for="user_text">Text</label>
    <div class="col-xs-4">  
      <input class="form-control" id="user_text" name="user[text]" placeholder="Enter password" type="text" />
</div>
</div>
<script>
$("#user_password").change(function(){

  if($("#user_password").val().length <= 6){
    $("div").addClass("has-error");
  }else{
    $("div").addClass();
  }
});
</script>

有什么方法可以将我的代码用于特定元素吗？很少帮助...

Answer 1

试试这个

使用id代表div示例：<div id="example"></div>

$("#user_text").change(function(){

   if($("#user_text").val().length <= 6){
 $("#example").addClass("has-error"); // It will add class to that example id div
   }else{
      $("#example").removeClass("has-error");
     }
  });

Answer 2

$("#user_text").change(function(){ 
  if($(this).val().length <= 6){
    $("div#dvId").addClass("has-error");
  }else{
    $("div#dvId").removeClass("has-error");
  }
});

Answer 3

使$("div")选择器更具体，例如$(".a-parent-element div")或$("div.my-css-class")

Answer 4

根据您的需要，您可以使用特殊过滤器：

$("#user_text").change(function(){

  if($("#user_text").val().length <= 6){
    $("div:first").addClass("has-error");
  }else{
    $("div:first").addClass();
  }
});

https://api.jquery.com/category/selectors/jquery-selector-extensions/

jquery：如何只为表单</div>中的一个<div>元素进行查询

4 个答案: