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

我只是简单地说明了一点。这里是MySQL数据库的示例表。什么是识别HTML元素的最佳方法

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元素，这样我就不必使用正则表达式和匹配一些小把戏更好的办法？这工作，我用这个，但如果有更好的方式，我想学习它。

来源

2014-04-01 Jammae

这一工程，但我会用'的正则表达式匹配this.id.split（ “_”）'代替。或者，您可以使用'data-action =“delete”data-id =“2”'属性。 –

你可以在一个元素中有多个类。我建议增加他们像下面和不断变化的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>

然后你可以检查与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 
    } 
    });

来源

2014-04-01 09:51:53 mesutozer

你可以有你的按钮像这样：

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

来源

2014-04-01 09:53:13

在这种情况下，两个按钮获得相同的ID – mesutozer

已更改为使用名称 –

使用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和onthe DOM元素而不是jQuery的对象。另请参见：

来源

2014-04-01 09:58:07 feeela

这是目前为止最好的方式，但我的问题是，现在当我的输入没有唯一标识符，我如何访问输入值data-entry-id X，它包含类“description”？ – Jammae

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

回答

相关问题