為JavaScript中的按鈕產生動態ID

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按鈕重用代碼，使代碼更具可讀性，沒有兩個不同的click事件處理程序，也不會丟失要傳遞給fetchUser函數的單個用戶的ID。

Answer 2

好吧，正如我所看到的，您有兩種選擇。 唯一ID是必須的。 我假設您的userids是唯一的，所以建議您使用它們作為后綴來為您的元素創建唯一的ID。

第一種選擇：為單擊“ Edit User時打開的每個用戶創建唯一的表單。

第二種選擇：創建一個單擊“ Edit User時填充用戶信息的通用表單。

第一個更簡單，但是第二個更高效。 這是第二個解決方案的示例代碼。 主要HTML：

<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>

和JS：

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