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

【问题标题】：Javascript/Laravel only First ID works for button仅 Javascript/Laravel 第一个 ID 适用于按钮
【发布时间】：2018-08-02 22:57:06
【问题描述】：

我正在使用 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

【问题讨论】：

重复id问题
从您的按钮代码中删除 id=edit-user。在处理程序中使用 $("button.edit-user").click.
/// $("button.edit-user").click(function(){ $(".edit- user").toggle(); 像这样？按钮返回时没有任何功能
在您提供的代码中，您的按钮有一个类 edit-user，所以我使用了它。在评论中，按钮只有引导 btn 类，但没有类 edit-user。它去哪儿了？好吧，你并不需要这个类。这个想法只是用类替换id，这样其中的许多（不仅仅是一个）可以被js处理。
我刚刚看到您的回复，抱歉，我的按钮一直没有出现在该课程中。我将编辑我原来的问题。我不得不将其更改为 $("button").click，没有编辑用户类。谢谢你的帮助！！！

标签： javascript php loops laravel-5

【解决方案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();

});

【讨论】：