Question

如何在转到网址之前劫持链接标记并指定带有链接标记ID的变量？

我的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>

我的JAVASCRIPT代码

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格式以填充页面。

请帮忙

Answer 1

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

在第一页上，将课程代码放在href网址中，如下所示：

<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);

Answer 2

正如@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并自行处理链接。

如何在转到链接之前分配带有链接标记id的javascript变量

2 个答案: