2011-04-05 5 views
0

이러한 이미지가 마우스 오버시 확장되고 이미지 제목이 포함 된 툴팁이 나타나는 jQuery가 있습니다.근처의 URL을 저장하고 jQuery와 함께 툴팁에 삽입하십시오.

http://jsfiddle.net/nathanbweb/7juZY/5/

(그것은 두 개의 별도의 플러그인의, 예,보다 효율적인 이상적인 방법이있을거야하지만 그건 내 질문이 아니다..)이로 "추가 정보"링크를 삽입 할 수있는 간단한 방법이 있을까요 이미 미리보기 이미지 아래의 '추가 정보'링크와 일치하는 도움말 다음, 다시 (A> UL에서> 리)

$(".tooltip").append(' '<a href="' + thelink + '">More Info</a>' '); 

하지만 난 한 위치에서 링크를 저장 도움이 필요한 변수 그렇게 나쁘지 해요 :

는 나는 이런 식으로 뭔가를 찾고 끝낼 생각 그것을 추가로 사용합니다.

답변

1

예, 이와 같이하면됩니다. 나는의 툴팁 플러그인을 사용할 필요가 있다고 생각하지 않습니다

var thelink; 
thelink = $(this).find("a").attr("href"); 
$(".tooltip").append('<a href="' + thelink + '">More Info</a>'); 

, 당신은 거의 바로 코드 (주석 부분)에서 바로 자바 스크립트의 변수와 사용 방법에 대한 약간의 연구를 얻었다.

편집 : 호버가 실행 된 후 툴팁이 생성되면 어떻게되는지 알 수 없습니다. 그러면 작동하지 않는 것 같아요. 풍선 도움말의 아래 코드와 같은 것을 사용하는 것이 좋습니다.

var title, tooltip, thelink, moreinfo; 

thelink = $(this).find("a").attr("href"); 
moreinfo = $('<a href="' + thelink + '">More Info</a>'); 
title = $(this).find("img").attr("title"); 
tooltip = $("<div class='tooltip'>" + title + "</div>"); 

tooltip.append(moreinfo); 
$(this).append(tooltip); 
+0

내가 링크에 필요한 코드이지만 Firebug에서 시도 할 때 추가 정보 링크는 "/ 정의되지 않음"이며 프로덕션에서는 아무 아이디어도 없습니까? – nathanbweb

+0

여기에 그것은 수수께끼 : http://jsfiddle.net/nathanbweb/7juZY/18/ (지금 나는 각 이미지를 링크로 포장하고 있습니다.) 그러나 그것은 ul의 첫 번째 링크를 가져 와서 모든 요소에 할당합니다. 같은 li에있는 링크를 가져 오려면 img가 필요합니다. – nathanbweb

+0

당신은 당신의 바이올린을 업데이트 할 수 있습니까? 편집 : 당신이 나를 이길 –

0

제목 속성 내에 <a></a> 태그를 사용할 수 없습니다. jQuery를 사용하여 제목을 가져 와서 Div에 표시 한 다음 Div 위에 놓는 상자 위에 Div를 배치하는 것이 좋습니다.

관련 문제