Question

我正在尝试编写一个功能，其中从数据库生成表数据以及编辑该特定行的按钮。数据是通过laravel的foreach生成的。其中一个按钮称为Edit User。

点击Edit User时，表单div将显示.toggle('show')，表示该表单。

现在我认为问题是按钮具有相同的切换ID，所以当我按下第二个，第三个等按钮时，表单不会切换。这是我的script.js

$(document).ready( function() {
  $("#form1").hide();
  $("#form2").hide();
  $("#createuser1").click(function() {
    console.log('Create user button clicked');
    $("#form2").hide();
    $("#form1").toggle('slow');
  });
  $("#edituser1").click(function() {
    console.log('Edit user button clicked');
    $("#form1").hide();
    $("#form2").toggle('slow');
  }); 
});

//start of checkuser
function fetchUser(field, query) {
  console.log('The field is ' + field + ' and the userid is ' + query);
}

我的html文件（main.blade.php）

<tbody>
  @foreach($users as $user)
    <tr>
      <td>{{$user->userid}}</td>
      <td>{{$user->firstname}}</td>
      <td>{{$user->lastname}}</td>
      <td>{{$user->username}}</td>
      <td>{{$user->password}}</td>
      <td>
        @if($user->status == 0)
          Inactive
        @elseif($user->status == 1)
          Active
        @endif
      </td>
      <td>
        <input class="btn btn-danger btn-inverse" type="button" value="Inactive" />
        <input name="edituser" type="button" onclick="fetchUser('edituser', {{$user->userid}})" id="edituser1" class="btn btn-success btn-inverse" value="Edit User"/>
      </td>
    </tr>
  @endforeach
</tbody>

这是切换表单的部分（也是main.blade.php的一部分）

<div class="container" id="form1">
  @include('create')
</div>

<div class="container" id="form2">
  @include('edit')
</div>

我只包含部分代码以避免大量不相关的代码。但随时可以要求更多细节。

帮我解决其他编辑按钮没有切换编辑用户表单的部分。

Answer 1

如果您的代码中已经有一个单击处理程序，我认为最好不要使用内联单击事件处理程序。将id更改为类：

  <tbody>
                @foreach($users as $user)
                  <tr>
                    <td>{{$user->userid}}</td>
                    <td>{{$user->firstname}}</td>
                    <td>{{$user->lastname}}</td>
                    <td>{{$user->username}}</td>
                    <td>{{$user->password}}</td>

                    <td>
                      @if($user->status == 0)
                        Inactive
                      @elseif($user->status == 1)
                        Active
                      @endif
                    </td>

                    <td>
                      <input class="btn btn-danger btn-inverse" type="button" value="Inactive" />
                      <input name="edituser" type="button" data-id="{{$user->userid}}"  class="btn btn-success btn-inverse editUser" value="Edit User"/>
                    </td>
                  </tr>
                @endforeach
              </tbody>

然后用这种方式改变你的js：

$(document).ready( function() {
  $("#form1").hide();
  $("#form2").hide();
  $("#createuser1").click(function() {
    console.log('Create user button clicked');
    $("#form2").hide();
    $("#form1").toggle('slow');
  });
  $(".editUser").click(function() {
    console.log('Edit user button clicked');
    var id = $(this).attr('data-id');
    fetchUser('edituser', id);
    $("#form1").hide();
    $("#form2").toggle('slow');
  }); 
});

//start of checkuser
function fetchUser(field, query) {
  console.log('The field is ' + field + ' and the userid is ' + query);
}

这样你可以重用所有edituser按钮的代码，你有更多的可读代码，你没有两个不同的点击事件处理程序，你不会丢失要传递给的单个用户的id fetchUser函数

Answer 2

好吧，正如我所看到的，你有两种选择。独特的ID是必须的。我假设您的Edit User是唯一的，因此我建议将它们作为后缀用于为您的元素创建唯一的ID。

第一个选项：为点击Edit User时打开的每个用户创建一个唯一的表单。

第二个选项：创建一个通用表单，在单击<div class="container" id="main">  <input type="button" onclick="fetchUser('edituser', {{$user->userid}}, {{$user->firstname}}, {{$user->lastname}})" class="btn btn-success btn-inverse" value="Edit User" />  </div>时填充用户信息。

第一个更简单，但第二个更有效率。这是第二个解决方案的示例代码。主要HTML：

<div class="container" id="form2">
    <input id='editFormFirstName' />
    <input id='editFormLastName' />
    <input id='editFormPassword' />
</div>

编辑表单HTML：

function fetchUser(field, userid, firstname, lastname) {
    $('#editFormFirstName').val() = firstname;
    $('#editFormLastName').val() = lastname;
    $('#editFormPassword').val() = "";
}

和JS：

{{1}}

在javascript

2 个答案: