Question

皆さん。ユーザーが何らかのテキストを書いている（またはまだ書いている）場合、入力フィールドの横にチェックマークを表示し、入力フィールドが空白の場合はクロスを表示します。 これは私の試みです：

$('#myForm input').blur(function(){ 
    if($(this).val() == '') 
    { 
     $(this).after("<img src='./media/img/cross.png' style='margin-top: 15px;'/>"); 
    } 
}); 

$('#myForm input').keypress(function(){ 
    if($(this).val() != '') 
    { 
     $(this).after("<img src='./media/img/tick.png' style='margin-top: 10px; width: 1.5em; height: 1.5em;'/>"); 
    } 
}); 

アッパーコードは画像を追加するたびにユーザーの種類の文字。どうすればこれを避けることができますか？これを行うよりエレガントな方法はありますか？

ありがとうございます。

UPDATE

これが私のHTMLです：

<form id="myForm" name="loginForm"> 
    <input type="text" class="input" placeholder="Username" id="username"/> 
    <input type="password" class="input" placeholder="Password" id="password"/> 
    <input type="submit" class="btns" value="Login" name="submitLogin"/> 
</form> 

Answer 1

はHTMLに、両方のイメージタグを追加し、display: hiddenで彼らにクラスを与えます。ちょっとこのように、.after()でDOM要素を追加しますが、それぞれ自分のIMGSの隠しクラスを設定または設定解除するためにそれらを使用することなく、あなたのイベントを使用します。

$('#myForm input').blur(function(){ 
 
     if($(this).val() == '') 
 
     { 
 
      $(this).next('.tick').addClass('hidden'); 
 
      $(this).next('.tick').next('.cross').removeClass('hidden'); 
 
     } 
 
    }); 
 

 
    $('#myForm input').keypress(function(){ 
 
     if($(this).val() != '') 
 
     { 
 
      $(this).next('.tick').next('.cross').addClass('hidden'); 
 
      $(this).next('.tick').removeClass('hidden'); 
 
     } 
 
    });

.hidden {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm" name="loginForm"> 
 
    <input type="text" class="input" placeholder="Username" id="username"/><img class="hidden tick" src="#" alt="tick" /><img class="hidden cross" src="#" alt="cross" /><br/> 
 
    <input type="password" class="input" placeholder="Password" id="password"/><img class="hidden tick" src="#" alt="tick" /><img class="hidden cross" src="#" alt="cross" /><br/> 
 
    <input type="submit" class="btns" value="Login" name="submitLogin"/> 
 
</form>