什麼是識別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元素的最佳方法

回答

相關問題