[jquery] jQuery Data () API를 사용하여 데이터 속성을 설정할 수 없습니다

설명서에 언급되어 .data()있습니다

데이터 속성은 데이터 속성에 처음 액세스 한 후 더 이상 액세스되거나 변경되지 않습니다 (모든 데이터 값은 내부적으로 jQuery에 저장 됨).

이것은 또한에 포함 된 해당 HTML 5의 데이터 – * 속성을 업데이트) jQuery를 $ .fn.data (에없는 변경 이유는 무엇입니까?

아래의 원래 답변에 대한 데모는 더 이상 작동하지 않는 것 같습니다.

업데이트 된 답변

다시, .data()문서에서

포함 된 대시가있는 속성 처리는 W3C HTML5 사양을 준수하도록 jQuery 1.6에서 변경되었습니다.

따라서 <div data-role="page"></div>다음은 사실입니다$('div').data('role') === 'page'

나는 그것이 $('div').data('data-role')과거에 일한 것이 확실 하지만 더 이상은 아닌 것 같습니다. 콘솔을 열지 않고 HTML에 기록하는 더 나은 쇼케이스를 만들었고 camelCase 데이터 속성 변환에 멀티 하이픈의 추가 예를 추가했습니다 .

업데이트 된 데모 (2015-07-25)

또한 참조 Attr의 대 jQuery를 데이터를?

HTML

<div id="changeMe" data-key="luke" data-another-key="vader"></div>
<a href="#" id="changeData"></a>
<table id="log">
    <tr><th>Setter</th><th>Getter</th><th>Result of calling getter</th><th>Notes</th></tr>
</table>

자바 스크립트 (jQuery 1.6.2+)

var $changeMe = $('#changeMe');
var $log = $('#log');

var logger;
(logger = function(setter, getter, note) {
    note = note || '';
    eval('$changeMe' + setter);
    var result = eval('$changeMe' + getter);
    $log.append('<tr><td><code>' + setter + '</code></td><td><code>' + getter + '</code></td><td>' + result + '</td><td>' + note + '</td></tr>');
})('', ".data('key')", "Initial value");

$('#changeData').click(function() {
    // set data-key to new value
    logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke");
    // try and set data-key via .attr and get via some methods
    logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda");
    logger("", ".attr('key')", "expect undefined (no attr <code>key</code>)");
    logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object");

    // bonus points
    logger('', ".data('data-key')", "expect undefined (cannot get via this method)");
    logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6+ get multi hyphen <code>data-another-key</code>");
    logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen <code>data-another-key</code> (also supported in jQuery 1.6+)");

    return false;
});

$('#changeData').click();

이전 데모

원래 답변

이 HTML의 경우 :

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

이 JavaScript (jQuery 1.6.2 포함)

console.log($('#foo').data('helptext'));

$('#changeData').click(function() {
    $('#foo').data('helptext', 'Testing 123');
//  $('#foo').attr('data-helptext', 'Testing 123');
    console.log($('#foo').data('data-helptext'));
    return false;
});

데모보기

은 Using 크롬 DevTools로 콘솔을 DOM을 검사하려면이 $('#foo').data('helptext', 'Testing 123'); 되지 않습니다 에서 볼 수 있듯이 값 갱신 콘솔 만 $('#foo').attr('data-helptext', 'Testing 123');수행합니다.

답변

.data('property', value);

.attr('property', value)

.attr('property')

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

$('#foo').attr('data-helptext', 'Testing 123');

$('#foo').data('helptext', 'Testing 123');

var data = $("#myObject").data();

var data = $.extend({}, $("#myObject").data());

alert($(targetField).attr("data-helptext"));

// Alternative to .data() that updates data- attributes, and reads their current value.
(function($){
  $.fn.realData = function(name,value) {
      if (value === undefined) {
        return $(this).attr('data-'+name);
      } else {
        $(this).attr('data-'+name,value);
      }
  };
})(jQuery);

function ExtendElementData(element, object){
    //element is what you want to set data on
    //object is a hash/js-object
    var keys = Object.keys(object);
    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        $(element).attr('data-'+key.replace("_", "-"), object[key]);
    }
}

function setDomData(element, object){
    //object is a hash

    var keys = Object.keys(object);
    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        $(element).attr('data-'+key.replace("_", "-"), object[key]);
    }
};

function getDomData(element, key){
    var domObject = $(element).get(0);
    var attKeys = Object.keys(domObject.attributes);

    var values = null;
    if (key != null){
        values = $(element).attr('data-' + key);
    } else {
        values = {};

        var keys = [];
        for (var i = 0; i < attKeys.length; i++) {
            keys.push(domObject.attributes[attKeys[i]]);
        }

        for (var i = 0; i < keys.length; i++){
            if(!keys[i].match(/data-.*/)){
                values[keys[i]] = $(element).attr(keys[i]);
            }
        }
    }
    return values;
};