호버에서 내부 HTML 변경

Question

저는 jQuery와 Javascript 개발을 처음 접했습니다. 나는 신속하게 링크 설명을 생성하기 위해 html 데이터 태그를 사용하는 사이트 탐색에 대한 아이디어를 조리했다. 나는 그것을 바이올린으로 설정했습니다 here. 내 문제는 jquery가 의도 한대로 작동하지 않는다는 것입니다. 나는 오류가 무엇인지 파악하기에는 너무 새롭다. 나는 어떤 조언도 크게 감사 할 것입니다. 미리 감사드립니다.

$(document).ready(function() { 
$(".nav-button").hover(function (e) { 
    var description = this.data('title') + ' <span>' + this.data('description') + '</span>'; 
    document.getElementById('nav-description').innerHTML = description; 

}, function (e) { 
    document.getElementById('nav-description').innerHTML = ''; 
}); 
}); 

Answer 1

의 jQuery 방법 :

$(function() { 
    $(".nav-button").hover(function (e) { 
     var description = $(this).data('title') + ' <span>' + $(this).data('description') + '</span>'; 
     $('#nav-description').html(description); 
    }, function (e) { 
     $('#nav-description').empty(); 
    }); 
}); 

권장 사항 :

1. 이의 jQuery 셀렉터 등 기본 자바 스크립트 getElementById() 메쉬하지 마십시오.

2. document.ready 대신 $(function() {}); 패턴을 사용하십시오.

Answer 2

당신은 jQuery를 개체로 this을 포장하지 않는 : 여기에

은 JQuery와의 코드합니다.

var description = $(this).data('title') + ' <span>' + $(this).data('description') + '</span>'; 
       ^^^ 

다른 라인에서도 jQuery를 사용할 수 있습니다. 다음과 같아야합니다

$('#nav-description').html(description); 

Answer 3

사실 this하지 data() 방법

그래서 당신은

this.dataset['title']; 
this.dataset['description']; 

대신

this.data('title'); 
this.dataset('description'); 

해야

같은 dataset 속성 것을 사용한다이 노드를리스트를 참조 JQuery와 이벤트 핸들러의 범위

DEMO

Answer 4

this 15,는 DOM 요소 아닌 JQuery와 객체를 말한다. 따라서 this을 $으로 바꿔야 jQuery 버전 즉 $(this)을 얻을 수 있습니다.

jQuery의 작동 방식은 다음과 같습니다. $(this)[0] === this. 즉, jQuery 객체에는 선택기와 일치하는 DOM 요소의 배열이 있습니다. 이것을 인 경우

이 도움이 될 jQuery를 새로운이기 때문에 내가 생각

....

이

http://www.learningjquery.com/2007/08/what-is-this/

는 DOM 요소

입니다 DOM 요소? 짧은 대답은 - 일반적입니다.jQuery로 스크립팅하는 것은 종종 콜백 함수를 사용합니다. 이벤트 처리, 노드 콜렉션 반복, 이미지 애니메이트 또는 동적 필터 적용 중 어떤 것이 든 적절한 시간에 사용자 정의 코드를 호출하는 데 콜백이 사용됩니다. 일을 쉽게하기 위해 jQuery는 콜백 함수의 범위를 콜백의 대상인 요소로 설정합니다.

... 그리고 코드

$(document).ready(function() { 
    $(".nav-button").hover(function (e) { 
     var $this = $(this), 
      description = $this.data('title') + ' <span>' + $this.data('description') + '</span>'; 
     $('#nav-description').html(description);    
    }, function (e) { 
     $('#nav-description').html(''); 
    }); 
});