我有一组使用JQuery的页面锚点，其中锚点链接显示弹出工具提示，说明锚点被调用的内容。
我希望能够获取页面锚点的h4标题，并使用JQuery替换锚点链接的title。
以下是其中一个锚点的标记：
<a name="section1">
<h4 id="sectiontitle1">Overview</h4>
</a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
以下是所述页面锚点的链接：
<div class="article-anchors">
<ul>
<li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li>
<li><a href="#section1" title="section1" class="articleS1">1</a></li>
<li><a href="#section2" title="section2" class="articleS2">2</a></li>
<li><a href="#section3" title="section3" class="articleS3">3</a></li>
<li><a href="#section4" title="section4" class="articleS4">4</a></li>
<li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li>
</ul>
</div>
解决方案的脚本：
$(document).ready(function() {
$('.article-anchors li a').mouseenter(function() {
var title = $(this).attr('title');
$(this).attr('title', $("[name=" + title + "] h4").html());
$(this).data('tipText', title)
$('<p class="tool-tip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}).mousemove(function(e) {
var mousex = e.pageX + -130;
var mousey = e.pageY + -40;
$('.tool-tip')
.css({
top: mousey,
left: mousex
})
}).mouseout(function() {
$('.tool-tip').fadeOut();
});
$('.to-top').click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
$('.to-bottom').click(function() {
$('html,body').animate({
scrollTop: $(document).height()
}, 700);
return false;
});
$('a:contains("section")').css('text-transform', 'uppercase');
});
所以当悬停时弹出工具提示应显示：
第4节=联络
实现这一目标的最佳方法是什么？我试过:contains，但这并没有给我带来欢乐。
TIA。
这是问题的小提琴：fiddle link
要提一下，驱动弹出式工具提示的jquery很大程度上依赖于css并且似乎不想玩球，但是如果你将鼠标悬停在右侧的编号子弹上，则标题显示并需要匹配每个部分的标题，1将是概述，2将是主要结构等。
答案 0 :(得分：0)
您的mouseenter功能应如下所示
$('.article-anchors li a').mouseenter(function() {
var title = $(this).attr('title');
$(this).attr('title', $("[name="+title +"] h4").html());
})
答案 1 :(得分：0)
$(function(){
var popupTitle = $('<p class="tool-tip"></p>').appendTo($('body')).hide();
// Find your links, but we could have generated your links from the client side
$('div.article-anchors ul li a[href^="#"]').each(function(){
var ref = $(this),
anchor = ref.attr('href') || '', // Find the #anchor
pound = anchor.indexOf('#'); // Find the location of #
// Verify
if (pound >= 0 && (pound + 1) < anchor.length) {
// Remove the # sign
anchor = anchor.substring(pound + 1);
// Find and set the title from the first h4 tag
ref.attr('floatTitle', $('a[name="'+anchor+'"] h4:first').text());
ref.attr('title', '');
}
}).mouseenter(function() {
var title = $(this).attr('floatTitle');
popupTitle.stop().hide()
.text(title)
.fadeIn('slow');
}).mousemove(function(e) {
var mousex = e.pageX + -130;
var mousey = e.pageY + -40;
popupTitle
.css({
top: mousey,
left: mousex
})
}).mouseout(function() {
popupTitle.fadeOut();
});
$('.to-top').click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
$('.to-bottom').click(function() {
$('html,body').animate({
scrollTop: $(document).height()
}, 700);
return false;
});
$('a:contains("section")').css('text-transform', 'uppercase');
});/*article anchors*/
.article-anchors {
display: block;
position: fixed;
right: 20px;
top: 50%;
}
.article-anchors ul {
list-style: none;
}
.article-anchors ul li:first-child i,
.article-anchors ul li:last-child i {
padding: 0;
text-align: center;
display: block;
font-size: 39px;
width: 46px;
height: 46px;
color: #0485c2;
margin: 0 0 20px 0;
}
.article-anchors ul li {
padding: 0;
margin: 0;
}
.article-anchors ul li a {
position: relative;
right: 0px;
z-index: 9999;
display: block;
width: 36px;
margin: 0 0 20px 0;
background-color: #E9F2F7;
border: 3px solid #0485c2;
color: #0485c2;
border-radius: 100px;
text-align: center;
padding: 8px 2px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.tool-tip {
display: none;
position: absolute;
margin-bottom: 20px;
width: auto;
padding: 6px 8px;
font-size: 16px;
font-weight: bold;
line-height: 24px;
color: #9EC483;
background-color: #CFE5BF;
border: 1px solid #9EC483;
border-radius: 3px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="article-anchors">
<ul>
<li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li>
<li><a href="#section1" title="section1" class="articleS1">1</a></li>
<li><a href="#section2" title="section2" class="articleS2">2</a></li>
<li><a href="#section3" title="section3" class="articleS3">3</a></li>
<li><a href="#section4" title="section4" class="articleS4">4</a></li>
<li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li>
</ul>
</div>
<a name="section1"><h4 id="sectiontitle1">Overview 1</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section2"><h4 id="sectiontitle2">Overview 2</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section3"><h4 id="sectiontitle3">Overview 3</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section4"><h4 id="sectiontitle4">Overview 4</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
整页摘要以便更好地查看。