0

我有一个脚本,它使用“data-”类型在 html 元素中存储信息。例如

<div class="My-Widget commentsandrating" data-XYZ="MCAN"></div>
<div class="My-Widget rating" data-XYZ="MCAN"></div>
<div class="My-Widget comments" data-XYZ="MCAN"></div>

其中一些将在带有 data-XYZ 的页面中,一些如下所示:

<div class="My-Widget commentsandrating"></div>
<div class="My-Widget rating"></div>
<div class="My-Widget comments"></div>

我正在尝试将 data-xyz 添加到 html 中。

对于所有浏览器,我使用以下功能

item.setAttribute('data-XYZ', queryString2);  

它适用于除 IE 之外的所有浏览器 ..

我尝试使用 jQuery

jQuery.data(item, 'XYZ', queryString2);

我应该用什么来设置它..

谢谢您的帮助...

4

3 回答 3

1

检查这个。可能对您有所帮助。

HTML

<div class="My-Widget commentsandrating" data-XYZ="MCAN"></div>
<div class="My-Widget rating" data-XYZ="MCAN"></div>
<div class="My-Widget comments" data-XYZ="MCAN"></div>

<div class="My-Widget commentsandrating"></div>
<div class="My-Widget rating"></div>
<div class="My-Widget comments"></div>

<input type="button" id="set" value="set"/>
<input type="button" id="get" value="get"/>

JS

$(function(){
  var queryString2 = "MCAN";
  var sel = "My-Widget";
  var widgetArray = document.querySelectorAll( '.' + sel );
  $('#set').on('click', function(){
      $.each(widgetArray, function(index, item){
         $.data(item, 'XYZ',  queryString2 + index);
      });
  });

  $('#get').on('click', function(){
      $.each(widgetArray, function(index, item){
         alert($.data(item, 'XYZ'));
      });
  });
});

检查这个演示

于 2012-10-27T11:36:46.760 回答
1

尝试

$(".commentsandrating").attr("data-xyz") //to get value

$(".commentsandrating").attr("data-xyz", value) //to set value
于 2012-10-27T11:51:41.147 回答
0

两个答案都是正确的,但我认为他们错过了解释代码的作用。
在您的情况下,您有两种选择:

  1. 使用$('element').data('key', 'value'). 这会将数据附加到您的 DOM 元素。然后您可以通过以下方式检索它$('element').data('key')
  2. 使用 向您的元素添加自定义属性$('element').attr('key','value'),然后使用 检索它$('element').attr('key')

尽管您正在做同样的事情,但两种方法在实现它的方式上有所不同。例如, usingdata为您提供了更多选择 - 您可以存储任何您想要的内容,包括 JSON 和 Array 数据。使用$('element').attr('key','value'),您只能存储一个字符串。

根据您的选择:

(you choose to use data)
$('.commentsandrating').data('XYZ', 'MCAN');
var getData = $('.commentsandrating').data('XYZ'); // will return "MCAN"

(you choose to use attr)
$('.commentsandrating').attr('XYZ', 'MCAN');
var getData = $('.commentsandrating').attr('XYZ'); // will return "MCAN"
于 2012-10-27T12:01:22.580 回答