如何在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(){

  //Get the link element

  var a = document.querySelector("a");

  var current =  a;

  //Log to demontrate only

  console.log(this.dataset.togglehref);

  //Update the link

  a.href = this.dataset.togglehref;

  //Set the data attribute for toggle

  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 () {

  count++;

 document.querySelector('a').href = "http://example.com";

  if (count == 1) {

    document.querySelector('a').href = "http://example.com/ar";

  } else {

     document.querySelector('a').href = "http://example.com";

  }

});

<a href="http://example.com">Link</a>

<span class="arb">Click Me</span>

Answer 4

试试这个代码：

document.querySelector('span.arb').addEventListener('click', function() {

  if(a.href == "example.com") {

     a.href="example.com/ar"; 

  } else {

     a.href="example.com"; 

  }

})

或更短的答案使用三元运算符：

document.querySelector('span.arb').addEventListener('click', function() {

  a.href = a.href == "example.com" ? "example.com/ar" : "example.com";

})