Question

我需要在laravel应用程序中创建一个文本输入弹出框。请参阅以下代码，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

@foreach ($project->tasks as $task)
  <ul>
    <li>
  <div>
  <div class="pull-right icons-align">
            <a href="" class="editInline"><i class="glyphicon glyphicon-plus"></i></a>
            <a href="" class="editInline"><i class="glyphicon glyphicon-pencil"></i></a>
            <a href="" class="editInline"><i class="glyphicon glyphicon-trash"></i></a>
        </div>
    <h4><a href="/projects/{{$project->id}}/tasks/{{ $task->id }}">{{ $task->task_name }}</a></h4>
 </div>
 </li>
 </ul>
  <hr>
@endforeach
</head>
<script>
$("a.editInline").css("display","none");

$('li').on('mouseover mouseout',function(){
     $(this).find('.editInline').toggle();
     //find the closest li and find its children with class editInLine and 
     //toggle its display using 'toggle()'
});
</script>
</body>

点击

<a href="" class="editInline"><i class="glyphicon glyphicon-plus"></i></a>

此按钮图标我需要弹出文本输入。我怎么能这样做？

Answer 1

<a href="" class="editInline plusInput"><i class="glyphicon glyphicon-plus"></i></a>

var count = 0;
$('.plusInput').click(function(e){
 e.preventDefault();
 count++;
 $('any').append('<input type="text" value="Input '+count+'">');
})

注意：'any'是您要插入输入的位置

JSFIDDLE DEMO

如何创建文本输入弹出框

1 个答案: