Php 识别HTML元素的最佳方法是什么

我要直截了当地讲一个简单的情况。下面是MySQL数据库的示例表

SQL数据库

+----+-------------+
| ID | Description |
+----+-------------+
|  1 | Example 1   |
|  2 | Example 2   |
|  3 | Example 3   |
|  4 | Example 4   |
+----+-------------+

然后我使用PHP（Laravel框架）将数据从数据库中获取到我的视图中

Laravel

@foreach
  <div id="entry_{{ $table->id }}">
     <input type="text" id="description_{{ $table->description }}">
     <button id="save_{{ $table->id }}" class="button">Save</button>
     <button id="delete_{{ $table->id }}" class="button">Delete</button>
  </div>
@endforeach

---

我的问题是，有没有更好的方法来命名/标识HTML元素，这样我就不必使用regexp和matching来完成这些操作了？这是有效的，我已经使用过，但如果有更好的方法，我想学习它。

一个元素中可以有多个类。我建议如下所示添加它们，并将id更改为数据id以仅包含行id：

<button data-id="{{ $table->id }}" class="button action-save">Save</button>
<button data-id="{{ $table->id }}" class="button action-delete">Delete</button>

---

您可以使用如下按钮：

<button name="{{$table->id}}" class="button save">Save</button>
<button name="{{$table->id}}" class="button delete">Delete</button>

---

在处理ID时，请尝试仅将该ID存储在包装与该ID相关的任何项目的最外层元素上。如果像示例中那样重复该ID，则必须从每个元素读取该ID，而不是仅从DOM中读取一次。这种方法不太容易出错

<div class="entry" data-entry-id="{{ $table->id }}">
   <input type="text" class="description">
   <button class="save button">Save</button>
   <button class="delete button">Delete</button>
</div>

请注意，

dataset

和

classList

是普通的JSAPI，使用DOM元素而不是jQuery对象。另见：

---

这是可行的，但我会使用

this.id.split（“”）

而不是正则表达式匹配。或者，您可以使用

data action=“delete”data id=“2”

属性。在这种情况下，两个按钮获得相同的id这是迄今为止最好的方法，但我的问题是，现在当我的输入没有唯一标识符时，我如何访问数据条目id X下的输入值，它包含类“description”？

<button name="{{$table->id}}" class="button save">Save</button>
<button name="{{$table->id}}" class="button delete">Delete</button>

$(".save").click(function() {
    var id = this.attr('name');
});

$(".delete").click(function() {
    var id = this.attr('name');
});

<div class="entry" data-entry-id="{{ $table->id }}">
   <input type="text" class="description">
   <button class="save button">Save</button>
   <button class="delete button">Delete</button>
</div>

/* iterate over each entry */
jQuery( '.entry' ).each( function() {

  var entryId = parseInt( this.dataset.entryId );

  /* setup click handler for the buttons inside the entry */
  jQuery( this ).on( 'click', 'button', function( event ) {

    if( event.target.classList.contains( 'save' ) ) {
      // save here
      saveEntry( entryId );
    }
    else if( event.target.classList.contains( 'delete' ) ) {
      // delete here
      deleteEntry( entryId );
    }

  } );

} );