javascript - 输入后打勾和交叉 - jQuery

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;'/>");
    }
});

只要用户输入字母，上面的代码就会添加图像。我怎样才能避免这种情况？有更优雅的方法吗？

提前致谢。

更新

这是我的 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>