javascript - 在表单字段 HTML/JQuery 中单击时显示图像

Question

当我使用 HTML/jQuery 或 JavaScript 单击表单字段时，是否可以使图像可见？

这是我的表单字段(在 Laravel 中):

<div class="form-group">

    {!! Form::label('twitter', 'Twitter:') !!}
    {!! Form::text('twitter', null, ['class'=>'form-control']) !!}

</div>

html部分:

<a href="http://ss">
    <img width="16"
    src="https://s3.amazonaws.com/htmlsig-assets/round/twitter.png" alt="Twitter">
</a>

Answer 1

给链接一个ID，使用CSS隐藏它

#linkId { display:none }

然后做

$(function() {
 $(".form-control").on("click",function() {
   $("#linkId").show();
 });
});

如果为空则删除:

$(function() {
 $(".form-control").on("focus, keyup",function() {
   $("#linkId").toggle(this.value!="");
 });
});