클릭 후 데이터가 * 업데이트되지 않습니다

Question

data-coords (11 번째 줄)을 업데이트하려고하지만 코드를 실행하면 data-coords이 업데이트되지 않습니다. 왜? 그게 나에게 맞는 것 같아, 내가 놓친 게 있니? 여기

$(document).on('click', '.next-prev-js', function (e) { 
    var item = e.target; 
    if($(item).is("img") && tagging){ 
     var offset = $(item).offset(); 
     var imgid = $(item).attr("data-image-id"); 
     var obi = $("#blackout-image").offset(); 
     x = (e.clientX - offset.left); 
     y = (e.clientY - offset.top); 
     addTag(e.clientX - obi.left - 55, e.clientY - 55); 
     saveCoords(x, y, imgid); 
     $(item).attr("data-coords", x+","+y); 
     tagging = false; 
     $(".tag-self").text("Tag yourself"); 
     $("#blackout-image img").css({cursor: "pointer"}); 
     $("#blackout-image .face").delay(3000).fadeOut("fast"); 
     return false; 
    } 
    var action = $(item).attr("data-action"); 
    nextPrevImage(action); 
    return false; 
}); 

은 HTML 부분 (이것은 PHP echo 문 내부에)입니다 :

<a class='thumb-photo' href=''> 
    <img class='thumb-img' data-coords='$x,$y' data-id='$id' data-image-id='$imid' data-file='$f' src='/user-data/images/image.php?id=$id&file=$f&height=240&width=240' width='240' height='240' /> 
</a> 

데모

(이 과정에서 페이지를 새로 고침하지 마십시오)

이미지 중 하나를 클릭하면 뷰어에서 열립니다. 이상 왼쪽 호버에

• "어디 그분이"사각형이 데이터 좌표는 (썸네일 이미지) "자신을 태그"에
• 다음 클릭 곳에 표시됩니다 다음의 위치를 ​​클릭 영상.
• "esc"를 누르거나 투명 영역을 클릭하여 뷰어를 닫으십시오.
• 이미지를 다시 클릭하고 "Where is He"위에 마우스를 놓으십시오. 그래도 좌표는 여전히 오래된 좌표이지만 나중에 업데이트해야합니다

http://wows.phpsnips.com/profile.php?id=1&tab=photos

Answer 1

새 위치를 클릭 당신은 data 방법을 사용해야합니다. jsfiddle에서

$(item).data({coords: x+","+y}); 

또는

$(item).data("coords", x+","+y); 

작품.

console.log($(item).data()); 

Answer 2

data- 속성 작업이 값은 페이지로드에 jQuery를 데이터 오브젝트로 복사됩니다 있다는 것입니다 방법을 :

당신은 당신의 데이터를 볼 수는 속성과. 그 후에 그들은 더 이상 정말로 연결되어 있지 않습니다. 따라서 속성을 변경하면 객체 은이 자동으로 업데이트되지 않습니다. 그 반대의 경우도 마찬가지입니다.

jQuery를 :이

var $d = $('div'); 
alert('Load: Attribute "a" gets copied to data object.\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test')); 

$d.attr('data-test','b'); 
alert('Changed attribute to "b". Attribute changed, object still "a".\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test')); 

$d.data('test','c'); 
alert('Changed data object to "c". Object changed, attribute still "b".\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test')); 

데모 : 귀하의 경우 그래서
http://jsfiddle.net/F5qkq/

, 당신은 단지 데이터를 변경

나는 동작을 보여주기 위해 간단한 테스트를했다 속성은 attr이지만 내부 데이터 객체는 동일하게 유지됩니다. b 그들은 더 이상 연결되어 있지 않습니다.

데이터 속성은 실제로 startvalue로 데이터 객체를 초기화하는 데만 사용됩니다.하지만 그 전에는 앞에서 설명한 것처럼 jQuery의 data 함수 만 사용하여 내부 데이터 객체를 변경해야합니다.