jQuery UI 툴팁 스크립트를 사용하고 있습니다 . 따라서 다음과 같은 다른 "데이터 ID"값을 가진 도구 설명 링크가 있습니다.
<a tooltip-link data-id="12555"></a>
<a tooltip-link data-id="38"></a>
"data-id"값은 ajax와 함께 내 서버 측 스크립트로 전송되고 ajax- 결과는 툴팁에 표시됩니다.
또한 이 ajax-response의 특정 부분 에서 링크 이름 을 동적으로 생성하고 싶습니다 .
링크 이름에 사용해야 하는 ajax-response<div class=""> 부분은 item-title클래스의 일부를 포함 하는 모든 내용입니다 .
아약스 응답
<div class="item-title">Item12555</div>
<div class="item-title3">Item38</div>
이것은 지금까지 내 작업 툴팁 -jQuery 스크립트입니다. 링크 이름 생성을 어떻게 구현할 수 있습니까?
jQuery(function($) {
$( "[tooltip-link]" ).each(function(i) {
var id = $(this).attr("data-id");
$(this).tooltip({
tooltipClass: "test",
content: function( response ) {
$.ajax({
url: "/datenbank/itemscript.php",
data: {
'var': id
},
type: "GET"
})
.then(function( data ) {
response( data );
});
},
items: "*"
});
})
});
jQuery 선택기로 요소를 선택하고 만들 수 있습니다 $(). 문자열을 data응답 의 문자열과 id데이터 속성 의 문자열을 결합하면서 선택기에 문자열을 전달 합니다.
content속성 기능을 사용하면 툴팁 요소 위에 마우스를 올려마다 호출된다. 이것은 $.ajax매우 비용이 많이 드는 모든 호버에 대해 호출을 호출합니다 .
먼저 AJAX 요청을 수행 data하고 content속성 값으로 요청 의 를 설정하여 되 돌리십시오 .
경우와는 <div class="item-title">단지에 저장된 앵커 요소에 추가 $tooltip변수.
마지막으로 툴팁 요소 title에는 HTML 의 속성이 필요합니다 . 이것은 명확하게 문서화되어 있지 않지만 속성 없이는 작동하지 않습니다. 제목에 값이있을 필요는 없습니다.
<a tooltip-link data-id="12555" title=""></a>
jQuery(function($) {
$("[tooltip-link]").each(function() {
let $tooltip = $(this);
let id = $tooltip.attr("data-id");
$.ajax({
url: "/datenbank/itemscript.php",
type: "GET",
data: {
"var": id
}
}).then(function(data) {
let $content = $(data);
let title = $content.find('.item-title3').text()
$tooltip.tooltip({
tooltipClass: "test",
content: data
});
$tooltip.append(title);
});
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다