点击链接并确认弹窗后，如何实现指定链接的Href替换？

问题描述 #

我是JavaScript新手，现有两个HTML链接：

<li><a class="dropdown-item confirm" href="#">wtdata</a></li>
<li><a class="dropdown-item confirm" href="#">ftdata</a></li>

第一步我已实现点击链接获取对应文本（如点击第一个链接得到wtdata），代码如下：

<script>
var myFunction = function() {
    var attribute = this.innerHTML;
    alert(attribute);
};

var elements = document.getElementsByClassName("dropdown-item");

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}
</script>

点击链接后，Bootstrap模态框会自动弹出（内置功能已实现），模态框包含两个按钮：

<button id='cancel_btn'>Cancel</button>
<button id='confirm_btn'>Confirm</button> 

第二步需求：若点击wtdata链接并点击弹窗的Confirm按钮，将wtdata链接的href替换为'wtdata_url'；点击ftdata链接并确认后，将其href替换为'ftdata_url'。

我尝试编写函数获取点击的链接文本，但无法获取返回值，代码如下：

<script>       
function getLinkname(cl){
    var elements = document.getElementsByClassName(cl);
    var getText = function() {
        var attribute = this.innerHTML;
        document.getElementById("staticBackdropLabel").innerHTML='Run ' + attribute + ' ?';
    };
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', getText, false);
    }
    return attribute;
}

var linkname = getLinkname('confirm');
console.log(linkname);
</script>

报错信息：

Uncaught ReferenceError: attribute is not defined
    at getLinkname ((index):159:1)

错误原因 #

报错是因为attribute是getText函数内部的局部变量，getLinkname函数直接return attribute时，这个变量根本不存在。而且点击事件是异步触发的，函数执行完时用户还没点击链接，没法直接返回点击的文本。

解决方案 #

核心思路：点击链接时保存当前点击的链接元素，等模态框确认按钮被点击时，再根据该元素的文本修改它的href。

具体实现代码：

<script>
// 全局变量保存当前点击的链接元素
var currentLink = null;

// 给所有带confirm类的链接绑定点击事件
var links = document.getElementsByClassName('confirm');
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        currentLink = this; // 保存当前点击的链接
        // 更新模态框标题
        document.getElementById("staticBackdropLabel").innerHTML = 'Run ' + this.innerHTML + ' ?';
    });
}

// 给确认按钮绑定点击事件
document.getElementById('confirm_btn').addEventListener('click', function() {
    if (currentLink) {
        // 根据链接文本设置对应的href
        switch(currentLink.innerHTML.trim()) {
            case 'wtdata':
                currentLink.href = 'wtdata_url';
                break;
            case 'ftdata':
                currentLink.href = 'ftdata_url';
                break;
        }
        // 重置当前链接变量，避免重复触发
        currentLink = null;
        // 可选：关闭Bootstrap模态框
        // bootstrap.Modal.getInstance(document.getElementById('staticBackdrop')).hide();
    }
});

// 给取消按钮绑定点击事件，重置变量
document.getElementById('cancel_btn').addEventListener('click', function() {
    currentLink = null;
});
</script>

代码说明 #

1. 用currentLink全局变量存储用户点击的链接元素，确保模态框按钮点击时能拿到目标元素。
2. 点击链接时，同步更新模态框标题并保存当前链接。
3. 点击确认按钮时，判断currentLink是否存在，再根据链接文本设置对应href。
4. 操作完成后重置currentLink，避免后续误操作。

内容的提问来源于stack exchange，提问作者William