如何在IE 8中设置数据值

Question

我有一个脚本，它使用“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);

我该怎么用来设置它呢

谢谢您的帮助...

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

检查这个演示

Answer 2

尝试

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

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

Answer 3

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

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

虽然你做的是同样的事情，但两种方法在实现方式上都有所不同。 例如，使用data为您提供更多选择 - 您可以存储任何您想要的内容，包括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"