將數據屬性附加到<a>Jquery中的元素</a>

Question

我想將data屬性附加到元素。 我的代碼是

 $('<a>', {
     class: 'like-comment 
             comment-like-color 
             comment_main_id_' + response.id,
     text: '', 
     href: 'javascript:;',
     }).appendTo(commentBody)
     .append($('<i>', {class: 'fa fa-thumbs-up'}));

我生成的HTML數據就像

<a class="like-comment comment-like-color 
          comment_main_id_{{$comment['id']}}" href="javascript:
          data-like-comment-id=" {{$comment[ 'id']}} ";">
    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>

我想使用jQuery創建一個data （data-like-comment-id）屬性。 有人可以幫我嗎。

Answer 1

$.fn.attr和$.fn.data之間的主要區別是：

$ .fn.attr ：直接在元素屬性上存儲信息/數據，這些信息/數據對於檢查是可見的，並且可以通過元素的本機API獲得。

$ .fn.data ：將信息存儲在JQuery外部無法訪問且封閉的位置

用attr()設置的數據

• 可通過$(element).attr('data-name')
• 也可以通過element.getAttribute('data-name')
• 如果值形式是data-name ，則也可以從$(element).data(name)和element.dataset['name']和element.dataset.name
• 在檢查元件上可見
• 不能是對象

用.data()設置數據

• 僅可通過.data(name)
• 無法通過其他任何地方訪問
• 不公開可見以供檢查
• 可以是對象

資源

在下面使用.attr()

$('elm').attr(attname,attvalue);

在避免沖突之前使用data-前綴

$('elm').attr('data-'+attname,attvalue);

在下面使用.data()

$('elm').data(attname,attvalue);

Answer 2

創建時給錨元素一個ID

$('<a id="foo"></a>'); // Simplified for brevity

然后可以選擇它，然后使用$.data()函數添加一個data屬性：

const mycomment = "some value";
$("#foo").data("like-comment", mycomment);

Answer 3

使用attr屬性

 $('<a>',{"class":'test',attr:{'prop':'value'}})

Answer 4

您可以在創建時將其添加到參數列表中：

  $('<a>', { class: 'like-comment comment-like-color comment_main_id_', text: '', href: 'javascript:;', 'data-like-comment-id': 'whatever' }).appendTo(document.body); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

或在使用.attr()之后添加它： http : //api.jquery.com/attr/

 $('<a>', { class: 'like-comment comment-like-color comment_main_id_', text: '', href: 'javascript:;', }) .attr('data-like-comment-id', 'whatever2') .appendTo(document.body); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

或使用.data()函數： https : //api.jquery.com/data/

這個不會在DOM中顯示

 $('<a>', { class: 'like-comment comment-like-color comment_main_id_', text: '', href: 'javascript:;', }) .data('like-comment-id', 'whatever3') .appendTo(document.body); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 5

對於“數據-”屬性，請使用此

 $(selector).data(key, value)