javascript - 如何在输入后附加图标 - 输入后？

Question

我正在尝试在验证字段后添加复选图标，我已经完成了 This而且我不想使用隐藏/显示来添加复选标记 - 因为它将它们添加到所有输入..这就是为什么我尝试使用 append()...但我不知道为什么不是在职的。我已经添加了 2 个示例 - 第一个是为了让您了解我希望实现的目标 - 第二个是我尝试使用 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 而不仅仅是已编辑的那个