Question

我正在使用laravel，并且正在循环显示带有编辑按钮的所有用户。我想用javascript隐藏用户编辑表单，并在单击时显示它。这适用于数组中的第一个项目，但是当我尝试编辑第二个用户时，该按钮将不起作用。有没有一种方法可以使用laravel直接在表单中插入ID？我知道这是因为id被重复，但是我不确定如何解决。

users.index

@extends('layouts.admin')


@section('content')



<div class="col-sm-8">
    <div class="panel">


        @if($users)
        @foreach($users as $user)

        <p>{!! $user->name !!}</p>
        <button class="btn btn-primary" id="edit-user"> Edit</button>
        <hr>
        <div class="edit-user">
        <h1>Edit Users</h1>

            {!! Form::open(['method'=>'POST', 'action'=>'AccountController@store']) !!}

                <div class="form-group">
                    {!! Form::label('name', 'Client Name:') !!}
                    {!! Form::text('name', null, ['class'=>'form-control']) !!}
                </div>
                    {{ csrf_field() }}

                <div class="form-group">
                    {!! Form::label('start_access_date', 'start:') !!}
                    {!! Form::text('start_access_date', null, ['class'=>'form-control']) !!}
                </div>
                    {{ csrf_field() }}


                    <div class="form-group">
                    {!! Form::label('end_access_date', 'end:') !!}
                    {!! Form::text('end_access_date', null, ['class'=>'form-control']) !!}
                </div>
                    {{ csrf_field() }}


                    {{ csrf_field() }}
                <div class="form-group">
                    {!! Form::submit('Edit Account', ['class'=>'btn btn-primary']) !!}
                </div>

            {!! Form::close() !!}


        </div>
 @endforeach
        @endif



            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $('.date').datepicker({  

       format: 'mm-dd-yyyy'

     });  

</script>  
  <script>

    $(document).ready(function(){

//if you wish to keep both the divs hidden by default then dont forget to hide //them           
$(".edit-user").hide();



$("#edit-user").click(function(){
      $(".edit-user").toggle();

});

});



</script>
    @endsection

Answer 1

也许您应该使用

<button class="btn btn-primary" class="edit-user-btn" data-id="{!! $user->id !!}"> Edit</button>

代替

<button class="btn btn-primary" id="edit-user"> Edit</button>

然后像这样javascript：

$(".edit-user-btn").click(function(){
  // here You might use id for your form label
  // var user_id = $(this).data("id");
  $(".edit-user").toggle();

}）;

仅Javascript / Laravel第一个ID适用于按钮

1 个答案: