Question

我在验证字段后尝试添加检查图标，我已完成This 并且我不想使用隐藏/显示添加复选标记 - 因为它将它们添加到所有输入中..这就是为什么我尝试使用append（） ......但我不知道为什么它不起作用。我添加了两个例子 - 第一个是让你理解我想要实现的目标 - 第二个是我试图用附加做的事情。

所以这部分工作：

    <h2>
    without append
    </h2>
    <hr>

    <div class="wrapper">
      <div class="cont">
        <input type="text" class="params_input form-control">
        <span class="params_icon"></span>
      </div>


      <div class="cont">
        <input type="text" class="params_input_phone form-control" maxlength="10">
        <span class="params_icon"></span>
      </div>

    </div>

    <h2>
    with append
    </h2>
    <hr>

    <div class="wrapper">
      <div class="cont">
        <input type="text" class="params_input_2 form-control">

      </div>


      <div class="cont">
        <input type="text" class="params_input_phone_2 form-control" maxlength="10">

      </div>

    </div>

CSS：

             .params_icon:before {
       content: "\f00c";
       font-family: FontAwesome;
       font-style: normal;
       font-weight: normal;
       text-decoration: inherit;
       --adjust as necessary-- color: #000;
       font-size: 18px;
       padding-right: 0.5em;
       position: absolute;
       top: 4px;
       right: 0;
       color: #49c8c1;
     }

     .params_icon {
       display: none;
     }



     p {
       color: red;
     }

     .cont {
       display: flex;
       position: relative;
     }

     .wrapper {
       display: flex;
     }

JS：

           <!-- without append
     -->
     $(".params_input").keyup(function() {

      if ($(this).val().length > 3) {
        $('.params_icon').show();
      } else {
        $('.params_icon').hide();
      }

    });

    $(".params_input_phone").keyup(function() {

      if ($(this).val().length === 10) {
        var text = $(this).val();
        $(this).val(text.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3"));
        $('.params_icon').show();
      }

    });
    <!-- with append
     -->
      $(".params_input_2").keyup(function() {

      if ($(this).val().length > 3) {
        $(this).append('<span class="params_icon"></span>');
      } 

    });

    $(".params_input_phone_2").keyup(function() {

      if ($(this).val().length === 10) {
        var text = $(this).val();
        $(this).val(text.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3"));
        $(this).append('<span class="params_icon"></span>');
      }

    });

Answer 1

您需要使用$(this).siblings('.params_icon').show();而不是$('.params_icon').show();，因为您只是定位每个'.params_icon，而不仅仅是已经编辑过的那个

Answer 2

这是因为.params_icon有display: none;，但还有其他问题我会清除

修改
别人在这里找不到的是更大的问题。你的param_icon被添加多次，如果你在收件箱中写下40个字符，它将被添加37次。您应通过在添加之前检查它是否存在来避免这种情况。

DEMO

$(".params_input_2").keyup(function() { var $this = $(this); if ($this.val().length > 3) { var $parent = $this.parent('.cont'); var $icon = $parent.find('.params_icon'); if ($icon.length <= 0) { $(this).parent('.cont').append(''); } } });

btw 如果您愿意，可以使用纯CSS解决显示问题

.params_input_2 + .params_icon { display: inline-block; }

Answer 3

使用(this).next('.params_icon').show();获取您输入的输入旁边的params_icon元素

演示或fiddle

＆＃13;

$(".params_input").keyup(function() {

  if ($(this).val().length > 3) {
    $(this).next('.params_icon').show();
  } else {
    $(this).next('.params_icon').hide();
  }

});

$(".params_input_phone").keyup(function() {

  if ($(this).val().length === 10) {
    var text = $(this).val();
    $(this).val(text.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3"));
    $(this).next('.params_icon').show();
  }

});

＆＃13;

.params_icon:before {
  content: "\f00c";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  --adjust as necessary-- color: #000;
  font-size: 18px;
  padding-right: 0.5em;
  position: absolute;
  top: 4px;
  right: 0;
  color: #49c8c1;
}

.params_icon {
  display: none;
}

p {
  color: red;
}

.cont {
  display: flex;
  position: relative;
}

.wrapper {
  display: flex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <input type="text" class="params_input form-control">
  <span class="params_icon">icon</span>
</div>


<div class="cont">
  <input type="text" class="params_input_phone form-control" maxlength="10">
  <span class="params_icon">icon</span>
</div>

</div>

＆＃13;

Answer 4

<强> JS

<!-- with append
 -->
  $(".params_input_2").keyup(function() {

  if ($(this).val().length > 3) {
    $(this).parent().append('<span class="params_icon2"></span>');
    //$(this).append('<span class="params_icon2"></span>');
  } 

});

$(".params_input_phone_2").keyup(function() {

  if ($(this).val().length === 10) {
    var text = $(this).val();
    $(this).val(text.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3"));
    $(this).parent().append('<span class="params_icon2"></span>');
  }

});

<强> CSS

 .params_icon:before, .params_icon2:before {
   content: "\f00c";
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   text-decoration: inherit;
   --adjust as necessary-- color: #000;
   font-size: 18px;
   padding-right: 0.5em;
   position: absolute;
   top: 4px;
   right: 0;
   color: #49c8c1;
 }

 .params_icon {
   display: none;
 }
 .params_icon2 {
   display: block;
 }

第一点是.params_icon{display: none}。

所以你应该把它display: inline-block | block | etc..

我又做了一个班.params_icon2。

第二个是$(this).append('');错了。

您应该改变$(this).parent().append('');

如何在输入后附加图标？

4 个答案: