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

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

MVC 뷰에는 다음 필드가 있습니다.

@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>

에서 의 js 에서 하고 를 설정하고 .data-helptext문자열 값에 속성을 지정합니다.제 암호는 이렇습니다.

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

$(targetField).data("helptext", "Testing 123");

alert()호출은 정상적으로 작동하며 경고 대화 상자에 "이전 텍스트" 텍스트가 표시됩니다.만,그를 data-helptext"Testing 123" 속성이 " Text는 여전히"이전 텍스트"는 여전히 속성의 현재 값입니다.

통화를 데이터()에 잘못 사용하고 있습니까?제가 이걸 인터넷에서 찾아봤는데 제가 뭘 잘못하고 있는지 모르겠어요.

HTML 마크업은 다음과 같습니다.

<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />

문서에 언급되어 있습니다.

데이터 속성은 데이터 속성에 처음 액세스할 때 풀링되고 더 이상 액세스 또는 변형되지 않습니다(모든 데이터 값은 jQuery에 내부적으로 저장됨).

jQuery $.fn.data()로 변경하면 해당 html 5 data-* 속성을 업데이트하지 않는 이유에 대해서도 다루었습니다.

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

업데이트된 답변

다시 말하지만, 문서에서

내장 대시를 사용한 속성 처리는 jQuery 1.6에서 W3C HTML5 사양에 맞게 변경되었습니다.

는.<div data-role="page"></div>은 참입니다입니다.$('div').data('role') === 'page'

저는 그것을 꽤 확신합니다.$('div').data('data-role')과거에는 일했지만 이제는 그렇지 않은 것 같습니다.콘솔을 열지 않고 HTML에 기록하는 더 나은 쇼케이스를 만들고 다중 하이픈을 camelCase 데이터 속성으로 변환하는 예를 추가했습니다.

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

또한 jQuery Data vsAtr?

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>

그리고 이 자바스크립트 (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;
});

데모 참조

Chrome DevTools Console을 사용하여 DOM 검사,$('#foo').data('helptext', 'Testing 123'); 콘솔에 표시된 것처럼 값을 업데이트하지는 않지만$('#foo').attr('data-helptext', 'Testing 123');

저는 심각한 문제가 있었습니다.

.data('property', value);

은 하지 를 .data-property기여하다.

jQuery's 사용 시작:

일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져오거나 일치하는 모든 요소에 대해 하나 이상의 속성을 설정합니다.

.attr('property', value)

값을 설정하고

.attr('property')

값을 회수할 수 있습니다.

이제는 효과가 있어요!

@andyb의 대답에 작은 버그가 있습니다.위의 그의 글에 대한 제 의견에 더해서...

다음 HTML의 경우:

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

.data() 메서드에 대한 위의 수정은 "정의되지 않음"을 방지하고 데이터 값이 업데이트됩니다(HTML은 그렇지 않음).

"data" 속성의 포인트는 요소와 값을 바인딩(또는 "link")하는 것입니다.매우 유사합니다.onclick="alert('do_something')"동작을 요소에 묶는 속성...텍스트는 쓸모가 없습니다. 당신은 그들이 요소를 클릭할 때 작업이 작동하기를 원할 뿐입니다.

데이터나 작업이 요소에 바인딩되면 일반적으로 HTML을 업데이트할 필요가 없으며, 오직 데이터나 메서드만 업데이트할 수 있습니다. 왜냐하면 응용 프로그램(JavaScript)에서는 이를 사용하기 때문입니다.성능 측면에서 HTML을 업데이트하려는 이유를 모르겠습니다. (파이어버그나 다른 콘솔을 제외하고) HTML 속성을 보는 사람은 아무도 없습니다.

생각해 볼 수 있는 한 가지 방법:HTML(속성과 함께)은 텍스트일 뿐입니다.자바스크립트가 사용하는 데이터, 함수, 객체 등은 별도의 평면에 존재합니다.자바스크립트가 지시를 받아야만 HTML 텍스트를 읽거나 업데이트할 수 있지만, 자바스크립트로 만든 모든 데이터와 기능은 Firebug(또는 다른) 콘솔에서 볼 수 있는 HTML 텍스트/속성과 완전히 별개로 작동합니다.

*저는 보통 HTML을 저장하고 내보내야 할 경우(예: 마이크로 포맷/데이터 인식 텍스트 편집기의 일종) HTML을 다른 페이지에 새로 로드하는 경우 HTML도 업데이트해야 할 수 있기 때문에 강조합니다.

저도 마찬가지에요.알고보니.

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

삭제할 수 없는 개체를 제공합니다.다음을 사용하여 해결했습니다.

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

그리고 그때부터.data쓰기 가능한 표준 JS 객체였습니다.

인용하기:

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

.data()- jQuery 문서화

이(솔직히 이상한) 제한은 사용에 대해서만 보류됩니다..data().

해결책? 사용하기.attr대신.

물론, 여러분 중 몇몇은 전용 방법을 사용하지 않는 것에 불편함을 느낄 수 있습니다.다음 시나리오를 생각해 보십시오.

• 사용자 지정 속성의 데이터 부분이 더 이상 필요하지 않도록 '표준'이 업데이트됩니다./교체됩니다.

상식 - 왜 이미 설정된 속성을 그렇게 바꾸려고 하는 거지?상상해보세요.class그룹으로 이름 변경을 시작합니다.id신원을 확인할 수 있습니다.인터넷이 끊길 겁니다.

그리고 심지어 그 때도, 자바스크립트 자체가 이 문제를 해결할 수 있는 기능을 가지고 있습니다. 물론 HTML과 호환되지 않는 것으로 악명이 높지만, REGEX(그리고 비슷한 다양한 방법들)는 여러분의 속성을 이 새로운 신화적인 '표준'으로 빠르게 이름을 바꿀 수 있습니다.

TL;DR

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

대로..data()는로을지data-attribute,과우된을를은(를을e)el,tf한과,은data-속성 변경

제 솔루션은 속성의 현재 값과 실제로 일치하는 메서드로 jQuery를 확장하는 것이었습니다.

// 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);

참고: 물론 사용할 수 있습니다..attr(), 하지만 내 경험으로는 대부분의 개발자들(일명 나)이 보는 실수를 합니다..attr()그리고..data()서로 교환할 수 있고, 종종 생각 없이 하나를 다른 것으로 대체합니다.대부분의 경우 효과가 있겠지만, 특히 모든 종류의 동적 데이터 바인딩을 처리할 때 버그를 도입할 수 있는 좋은 방법입니다.그래서 이렇게 해서..realData()된 행동에 좀 더 수 즉, 된 하게 에 하게 된 에

같은 문제가 있었습니다..data() 메서드를 사용하여 데이터를 얻을 수 있으므로 요소에 쓸 방법만 파악하면 됩니다.이것이 제가 사용하는 도우미 방법입니다.대부분의 사람들이 말했듯이 .attr을 사용해야 합니다.제가 알기로는 아무 것이나 _ 로 교체하고 있습니다.다른 캐릭터를 대체하는 건...그러나 나는 그것을 조사하지 않았습니다.

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]);
    }
}

편집: 2017년 5월 1일

내장된 메소드를 사용하여 정확한 데이터를 얻을 수 없는 경우가 여전히 있다는 것을 발견하여 지금 사용하는 방법은 다음과 같습니다.

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;
};

언급URL : https://stackoverflow.com/questions/6827810/unable-to-set-data-attribute-using-jquery-data-api