jQuery统一给a标签的href属性添加前缀

2021年10月4日 09:55 by wst

web开发

---

解决页面上显示pdf文件的问题

由于网站中有大段的文字需要显示，于是想到用PDF的形式直接展示（写页面还是太麻烦），最终在网上找到一个好用插件pdf.js，在整个使用过程中也是走了一些弯路，在此做个记录。

原来的显示方式

直接把超链接设置为pdf的文件路径

<ul class="course">
    <li>
        <a href="./docs/刘总被采访记录.pdf" target="_blank" class="btn btn-primary" role="button">
            刘总被采访记录</a>
    </li>  
    <li>
        <a href="./docs/刘总心路历程-做更好的脱模剂.docx" target="_blank" class="btn btn-primary" role="button">
            刘总心路历程-做更好的脱模剂</a>
    </li>
    <li>
        <a href="./docs/轻质混凝土脱模剂的试验方法.docx" target="_blank" class="btn btn-primary" role="button">
            轻质混凝土脱模剂的试验方法</a>
    </li> 
    <li>
        <a href="./docs/产品使用说明书.pdf" target="_blank" class="btn btn-primary" role="button">
            产品使用说明书</a>
    </li>                    
</ul>

这样做的效果是，浏览直下载了这个文件，体验不好。

新的显示方式

<a href="pdfjs-2.10.377-dist/web/viewer.html?file=http://127.0.0.1:5500/docs/%E5%88%98%E6%80%BB%E8%A2%AB%E9%87%87%E8%AE%BF%E8%AE%B0%E5%BD%95.pdf">点击查看pdf内容</a>

问题：修改起来比较麻烦，之前已经写好了，十几个href一个个改太费劲。

思考

既然是相同的前缀，那么这不是程序最擅长干的事吗？于是想到了jQuery，页面加载后，统一进行修改。作为一个后端程序员，jQuery着实不熟，中间走了一些弯路，好在最终解决了，方案如下：

<script>
$(function () {

    var url_pre = "pdfjs-2.10.377-dist/web/viewer.html?file="
    $("#course a").map(function(){
        console.log("this", this)
        this.href = url_pre + this.href
        return this
    })

})
</script>

重点

1. 先找到要改的元素，然后利用map方法修改，同时注意this的用法。

2. PDF.js的用法：官网连接，中文博客

---