jQuery 객체 - 아래 코드에서 어떻게됩니까?

Question

아래의 jQuery 스 니펫에서 어떤 일이 일어날 지 아무도 설명하지 못합니까? 그건 ... <div/>tileDiv는 두 값 JQuery와 객체로 설정하고, 제 2 비트 콤마 이후 같은 날에

 var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId }); 
     tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor); 
     tileDiv.data(this); 

, 그것은 보인다. 그러나 tileDiv.data(this) 전화로 무슨 일이 일어나는지 100 % 확신하지 못합니다. 설명이나 가장 좋은 추측을 보내 주셔서 감사합니다.

tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor); 

다음 border-top CSS 속성을 추가 한 다음

var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId }); 

하고 :

Answer 1

코드 번째 인수 전달 특성을 가지는 새로운 div 만들기, tileDiv에 jQuery 오브젝트를 저장해 마지막 줄의 경우, .data 함수를 사용하면 해당 jQuery 객체와 관련된 데이터를 저장하고 검색 할 수 있습니다. 요소의 HTML5 data- 속성에서 정보를 검색하는데도 사용할 수 있습니다. 이 경우 this의 모든 회원은 tileDiv 님의 데이터에 저장됩니다. 당신이 가지고있는 경우 :

this.someData = 99; 
this.otherData = 87; 
tileDiv.data(this); 

그런 다음 tileDiv.data('someData')는 99를 반환하고 this jsFiddle에서 볼 수 tileDiv.data('otherData')는 87를 반환합니다.

여기에서 jQuery .data에 대한 설명서를 참조하십시오. .data jQuery API.

Answer 2

데이터는 DOM 객체에 메타 데이터를 저장하는 JQuery 명령입니다. http://api.jquery.com/data/ 데이터는 원하는대로 지정할 수 있습니다. 이 같은

tileDiv.data(key, object_with_data) 

을하고 검색 :이 같은 데이터를 추가하려면 위의 데이터를 검색하지만, 그것으로 아무것도하지 않는 것처럼

var tileDiv.data(key); 

그래서 그래, 그것은 보인다.

Answer 3

data은 HTML 속성에 대한 HTML 5 접두어입니다. 사용자의 컨텍스트에서 this이 "hello"와 같은 기본 문자열 인 것을 알고있는 경우 jQuery는 data-hello이라는 속성 HTML 속성을 얻습니다. 하지만 볼 수 있듯이 개체에는 아무 것도 나타나지 않으므로 아무 것도 일어나지 않습니다.

그 다음 DIV의 내 텍스트를 설정

$(titleDiv).attr("data-" + this) 

Answer 4

첫 줄 새로운 DIV를 생성하고 idclass 특성을 설정 해주기 동일.

두 번째 줄은 위쪽 테두리 스타일을 설정합니다.

세 번째 줄은 this 개체의 모든 속성과 동일한 새 div에 데이터를 첨부합니다.이 개체는 일반 개체 일 수도 있지만 new Something 생성자를 통해 만든 Javascript 개체라고 추측합니다.

따라서 this.answer = 42 인 경우 tileDiv.data("answer")의 결과는 세 번째 줄 실행 후 42가됩니다.

this의 모든 속성을 복사하는 데 약간의 낭비가 있지만, tileDiv.data("tileInfo", this)을 말하는 것이 더 좋았을 수도 있지만 더 많은 코드를 보지 않고는 말하기가 어렵습니다.