iou3344 2021-09-06 22:38 采纳率: 84.1%
浏览 111
已结题

请教一段js代码，将超链接公共部分放到js中的方法

[为防止误导，重新编辑了一下问题，不好意思！]
通过js代码或者jquery实现：
1、点击class=a的连接时，访问https://www.aaaaaa.com/?page=n
2、点击class=b的连接时，访问https://www.bbbbbb.com/?page=n

运行环境是这样的，还请再看一下哈。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简约表格插件</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/demo/jquerytablePlugin201901132312/js/tableXR.js"></script>
</head>
<body>
    <div id="root" style="width: 800px"></div>
    <script type="text/javascript">
        $('#root').tableXR({
            //表格标题
            title:'学生成绩列表',
            //表格头部设置
            columns:[
                {data:'name',title:'名字'},
                {data:'age',title:'年龄'},
                {data:'store',title:'得分'},
                {data:'level',title:'等级'},
        {data:'detal',title:'详情'},
            ],
            //表格数据：
            data:[
                {name:'小红',age:'18',store:'98',level:'A',detal:'<a class="a" href="/?page=1">详情a</a>'},
                {name:'小化',age:'18',store:'97',level:'A',detal:'<a class="b" href="/?page=1">详情b</a>'},
                {name:'小杰',age:'15',store:'95',level:'A',detal:'<a class="a" href="/?page=1">详情a</a>'},
                {name:'小刚',age:'17',store:'95',level:'A',detal:'<a class="b" href="/?page=1">详情b</a>'},
                {name:'大水',age:'23',store:'97',level:'A',detal:'<a class="a" href="/?page=1">详情a</a>'},
                {name:'小胡',age:'22',store:'88',level:'B',detal:'<a class="b" href="/?page=1">详情b</a>'},
                {name:'热热',age:'19',store:'90',level:'A',detal:'<a class="a" href="/?page=1">详情a</a>'},
                {name:'二娃',age:'17',store:'92',level:'A',detal:'<a class="b" href="/?page=1">详情b</a>'},
                {name:'小瑟',age:'16',store:'89',level:'B',detal:'<a class="a" href="/?page=1">详情a</a>'},
                {name:'滑板',age:'15',store:'91',level:'A',detal:'<a class="b" href="/?page=1">详情b</a>'},
                {name:'Dddd',age:'17',store:'95',level:'A',detal:'<a class="a" href="/?page=1">详情a</a>'},
                {name:'DSDd',age:'17',store:'95',level:'A',detal:'<a class="b" href="/?page=1">详情b</a>'},
                {name:'DSDa',age:'17',store:'95',level:'A',detal:'<a class="a" href="/?page=1">详情a</a>'},
                {name:'DSDb',age:'17',store:'95',level:'A',detal:'<a class="b" href="/?page=1">详情b</a>'},
            ]
        })
    </script>
</body>
</html>

<script>
    var aList = document.querySelectorAll('a');
    aList.forEach((e, index) => {
        base_href = e.href.substr(e.href.lastIndexOf("/") + 1);
        if (e.className == 'a') {
            e.setAttribute('href', "https://www.aaaaaa.com" + base_href);
        } else if (e.className == 'b') {
            e.setAttribute('href', "https://www.bbbbbb.com" + base_href);
        }
    })
</script>
  • 写回答

5条回答 默认 最新

  • Roc-xb 后端领域优质创作者 2021-09-07 03:42
    关注

    如果有帮助的话，望采纳支持，谢谢！

    
 <script>
        function fun() {
            var aList = document.querySelectorAll('a');
            aList.forEach((e, index) => {
                base_href = e.href.substr(e.href.lastIndexOf("/") + 1);
                if (e.className == 'a') {
                    e.setAttribute('href', "https://www.aaaaaa.com" + base_href);
                } else if (e.className == 'b') {
                    e.setAttribute('href', "https://www.bbbbbb.com" + base_href);
                }
            })
        }
        fun()
        var btn = document.getElementsByName('prev')[0];
        // 第一种 通过点击事件
        document.querySelector(".prev").onclick = function() {
                console.log("执行上一页")
                fun();
            }
            // 第一种 通过点击事件
        document.querySelector(".next").onclick = function() {
            console.log("执行下一页")
            fun();
        }
    </script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 9月15日
  • 已采纳回答 9月7日
  • 修改了问题 9月7日
  • 修改了问题 9月7日
  • 展开全部

悬赏问题

  • ¥15 javaweb项目无法正常跳转
  • ¥15 VMBox虚拟机无法访问
  • ¥15 skd显示找不到头文件
  • ¥15 机器视觉中图片中长度与真实长度的关系
  • ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
  • ¥15 R语言卸载之后无法重装，显示电脑存在下载某些较大二进制文件行为，怎么办
  • ¥15 java 的protected权限 ，问题在注释里
  • ¥15 这个是哪里有问题啊？
  • ¥15 关于#vue.js#的问题：修改用户信息功能图片无法回显，数据库中只存了一张图片（相关搜索：字符串）
  • ¥15 texstudio的问题，