Question

我直截了当地谈到了一个简单的情况。这是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视图中拥有整个数据库内容。为了更好的用户体验，我需要在飞行中使用jQuery技巧，所以我检查何时按下任何按钮。

的jQuery

$(document).ready(function() 
{
  $(".button").click(function() 
  {
    // Get's id of button what is pressed
    var elementID = this.id;

    // I don't know if this regexp works, but you get the point. 
    // Let's grab all text before and after _
    var regexp = /(.*?)_(.*?)/;
    var match = elementID.match(regexp);
    var operation = match[1];
    var id = match[2];

    // And here i would check that is operation save or delete. 
    // If it is delete_2, i would do tricks with AJAX and after that delete div entry_2
  });
});

我的问题是，是否有更好的方法来命名/识别HTML元素，这样我就不必使用正则表达式和匹配来做技巧了？这有效，我已经使用了这个，但如果有更好的方法我想学习它。

Answer 1

你可以按下这样的按钮：

<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');
});

Answer 2

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

JS：

/* 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 );
    }

  } );

} );

请注意dataset和classList是普通的JS API，可以处理DOM元素而不是jQuery对象。另见：

Answer 3

您可以在元素中拥有多个类。我建议像下面这样添加它们并将id更改为data-id以仅包含行id：

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

然后你可以用jQuery的hasClass方法检查动作：

$(".button").click(function() 
  {
    var id = this.attr('data-id'); // contains pure id
    if ($(this).hasClass("action-delete")) {
        // delete operation
    } else iif ($(this).hasClass("action-save")) {
        // save action
    } 
  });

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

3 个答案: