通过a标签href值找到对应的span标签内容

如下面的代码，通过js，怎样可以实现，点击类似[1]这样的a标签，根据a标签中的#n0279001值，找到底部注解中对应包含0279001的span，然后alert出它的内容呢？


<html lang="zh-cn">
<meta charset="utf-8" />
<head>
<title>测试标题</title>
</head>

<body>
<style>
a{
    color:red;
}
</style>
<p><a href="#n0279001">[1]</a>浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
<p><a href="#n0279002">[2]</a>主人下马客在船，<a href="#n0279003">[3]</a>举酒欲饮无管弦。</p>




<h5>注解:</h5>
<span><a href="#note_anchor_0279001">[0279001]</a> 浔阳是现在的江西省九江市</span><br>
<span><a href="#note_anchor_0279002">[0279002]</a> 主人公为白居易</span><br>
<span><a href="#note_anchor_0279003">[0279003]</a> 管乐器与弦乐器，亦泛指乐器；指管弦乐。</span>

</body>
</html>

你题目的解答代码如下：

<html lang="zh-cn">
<meta charset="utf-8" />
<head>
<title>测试标题</title>
</head>
 
<body>
<style>
a{
    color:red;
}
</style>
<p><a href="#n0279001" onclick="func(this,event)">[1]</a>浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
<p><a href="#n0279002" onclick="func(this,event)">[2]</a>主人下马客在船，<a href="#n0279003" onclick="func(this,event)">[3]</a>举酒欲饮无管弦。</p>
 
 
 
<h5>注解:</h5>
<span><a href="#note_anchor_0279001">[0279001]</a> 浔阳是现在的江西省九江市</span><br>
<span><a href="#note_anchor_0279002">[0279002]</a> 主人公为白居易</span><br>
<span><a href="#note_anchor_0279003">[0279003]</a> 管乐器与弦乐器，亦泛指乐器；指管弦乐。</span>
 
<script type="text/javascript">
function func(a,event) {
    event.preventDefault();  //防止a链接跳转,如果不需要可以去掉
    var sp = document.querySelectorAll("span"); //获取页面中所有span, 如果要获取某个div中的span, 改成document.querySelectorAll("#div的Id span");
    for (var i = 0; i < sp.length; i++) {    //循环所有span
        var str = a.getAttribute('href').slice(2);  //获取a元素的href,去掉前面#n两个字符
        var spantext = sp[i].innerHTML;    //获取span的内容
        if(spantext.indexOf(str)!=-1)      //判断spantext 中是否包含str
            alert(spantext);
    }
}
</script>
</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632