如何分配javascript变量与链接标签的id之前去链接

How to assign javascript variable with id of a link tag before going to the link

本文关键字：链接 标签 id 变量 何分配 分配 javascript      更新时间：2023-09-26

我如何劫持一个链接标签，并分配一个变量与链接标签的id之前去url?

我的HTML代码

<div id="course" class="row">
    <div class="col-md-6"><a href="read.html" id="m1">Course 1</a></div>
    <div class="col-md-6"><a href="read.html" id="m2">Course 2</a></div>
<div>

MY JAVASCRIPT CODE

document.getElementById("course").addEventListener("click", courseInfo);
function courseInfo(){
    var selectedCourse = the id of the course selected;
    //assign to localstorage
    localStorage.setItem("courseid", selectedCourse);
    //go to courseinfo.html
    window.location.href = 'courseinfo.html';
}

我试图获得课程的Id并将其设置为本地存储，以便在加载courseinfo.html时，如果请求ajax并解析课程json格式以填充页面。

请帮

您不应该使用localStorage，而只需通过URL参数传递信息:

在第一页，将课程代码放入href URL，如下所示:

<div id="course" class="row">
    <div class="col-md-6"><a href="courseinfo.html?courseid=1" id="m1">Course 1</a></div>
    <div class="col-md-6"><a href="courseinfo.html?courseid=2" id="m2">Course 2</a></div>
<div>

不需要JavaScript。

然后在接收页面，按如下方式捕获课程id:

var courseid = location.search.match(/[&?]courseid=(.*?)(&|$)/);
if (courseid) courseid = courseid[1]; // get captured group
// this would output "1" if the URL argument was `courseid=1`
console.log(courseid);

正如@trincot建议的那样，您可以在接收端执行此操作。

但是，如果您确实需要在单击被单击的链接时捕获它的id，则需要在链接本身上添加事件处理程序，然后使用接收到的事件来处理数据，如下所示

var x;
var links = document.getElementsByTagName("A");
for(x in links) {
    if (links[x] instanceof Element) {
        links[x].addEventListener('click',doX, false);
    }
}
function doX(e) {
    alert(e.currentTarget.id);
}

请注意，在快速浏览器上，浏览器可能不会完全完成运行doX之前页面得到刷新和上下文消失，所以这不是一个非常安全的方法来做的事情，除非你防止使用e.preventDefault的默认操作和处理链接自己。

相关文章：