如何在JavaScript中实现点击事件？

Question

我在页面上选择一个 span 元素。对于第一次点击，我希望它链接到另一个页面。第二次单击时，我希望它返回到原始页面。

例如，我有一个 的链接example.com，这是原始的。当单击此元素“abcd”时，我希望它链接到example.com/ar，当再次单击它时，我希望它返回到example.com。

document.querySelector('span.arb').addEventListener('click', function() {
  a.href="example.com";
})

我如何使用上述内容完成此操作？

Answer 1

您可以获取链接并在点击后更改她document.querySelector('span.arb').addEventListener('click', toogle)function toogle(){if( document.querySelector('span.arb').href === "domain.com"){document.querySelector('span.arb').href = "domain.com/link"} else if (document.querySelector('span.arb').href === "domain.com/link"){document.querySelector('span.arb').href = "domain.com"}

Answer 2

将链接保存在数据属性中并使用它进行切换。document.querySelector("[data-toggleHref]").addEventListener("click", function(){&nbsp; //Get the link element&nbsp; var a = document.querySelector("a");&nbsp; var current =&nbsp; a;&nbsp; //Log to demontrate only&nbsp; console.log(this.dataset.togglehref);&nbsp; //Update the link&nbsp; a.href = this.dataset.togglehref;&nbsp; //Set the data attribute for toggle&nbsp; this.dataset.togglehref = current;});<a href="/pagea.html" id="target">Link</a><span data-toggleHref="/pageb.html">Click Me</span>

Answer 3

尝试这个：let count = 0;document.querySelector('span.arb').addEventListener('click', function () {&nbsp; count++;&nbsp;document.querySelector('a').href = "http://example.com";&nbsp; if (count == 1) {&nbsp; &nbsp; document.querySelector('a').href = "http://example.com/ar";&nbsp; } else {&nbsp; &nbsp; &nbsp;document.querySelector('a').href = "http://example.com";&nbsp; }});<a href="http://example.com">Link</a><span class="arb">Click Me</span>

Answer 4

试试这个代码：document.querySelector('span.arb').addEventListener('click', function() {&nbsp; if(a.href == "example.com") {&nbsp; &nbsp; &nbsp;a.href="example.com/ar";&nbsp;&nbsp; } else {&nbsp; &nbsp; &nbsp;a.href="example.com";&nbsp;&nbsp; }})或更短的答案使用三元运算符：document.querySelector('span.arb').addEventListener('click', function() {&nbsp; a.href = a.href == "example.com" ? "example.com/ar" : "example.com";})