Javascript 将 HREF 替换为 ONCLICK

Question

我是 Javascript 的新手，需要一些帮助来创建将 'onclick' 添加到 class 上特定 class 的 href link 的脚本=21=] 页面，在页面加载时 - 使用 link 的 href URL，而不触及内联代码。该脚本将从这个

修改一个常规的link

<a href="URL" class="XYZ">

对此：

<a href="#" onclick="location.href='URL';" class="XYZ">

每个 link 的 URL 发生变化，但 class 保持不变。这是我到目前为止得到的，但我想知道是否可以改进它：

window.onload = function() {

// Saving all links with XYZ-class in a variable
let links = document.getElementsByClassName('XYZ');

// Iterating through the links, changing the onclick attribute
for(let i = 0; i < links.length; i++) {
    // Saving the URL 
    let grabbedURL = links[i].getAttribute('href');

    // Putting it in onclick
    links[i].setAttribute('onclick', `location.href='${grabbedURL}'`);

    // Replacing href with '#'
    links[i].setAttribute('href', '#');

}

Answer 1

这是一种使用 for...of loop 的方法；如果你愿意，你可以改变它：

// iterate through all results of a css selector
for (let link of document.querySelectorAll('a.XYZ')) {
  // set onclick attribute as text
  link.setAttribute('onclick', 'location.href = ' + JSON.stringify(link.href) + ';');
  // set href attribute to empty anchor (#)
  link.href = '#';
}

<body>
<a href="https://example.com/" class="XYZ">http://example.com/</a>
<br>
<a href="https://foo.bar/" class="XYZ">http://foo.bar/</a>
</body>

可以使用 EventTarget.addEventListener() 为您的问题提供更现代的解决方案，但到目前为止，这就是您所要求的。如果您对此答案有疑问，请在下方留言。
作为 Stack Overflow 的新手：如果您对问题有一个有用的答案，您可以将其标记为已接受。当然，只有你愿意。不一定是我的。

Answer 2

将它放在你的 JS 中应该可以做到：

const convert = () => {

  const links = document.querySelectorAll("a");

  for(let i = 0; i < links.length; i++){
    let href = links[i].getAttribute("href");
    let handleClick = () => {
      console.log("the url is:",href)
      window.location.href = href;
    }
    links[i].onclick = handleClick;
    links[i].setAttribute("href","#");
  }
}

convert();

Answer 3

document.getElementsByClassName('XYZ')[0].setAttribute("onclick","location.href='URL' ")

试试这个..

对于页面加载后的效果，在 body 标签的最后添加脚本

Answer 4

如果我理解你的问题，我想你想要这样的东西：

function updateLink() {
    var link = document.getElementById("linkId");
    link.setAttribute('href', "http://google.com");
}

然后只需将 'id' 添加到您的 link。或者获取 class 而不是 id.

Answer 5

我认为您在这里可能漏掉了更重要的一点。锚点是为导航而设计的，如果你想改变目的地，不要设置onclick然后禁用href，只需将href更新为你想去的地方。

而且，要以最简单的方式执行此操作，请使用 event delegation, where we leverage the fact that events bubble up from their origin to the document. We just create one event handler on a common ancestor of all the elements in question and handle the even there. When we do, we check to see if the event originated at an element that we care about using event.target 如果确实如此，我们将采取相应的行动。

这是一个例子：

let url = "https://example.com";

// Set an event listener on the document itself
document.addEventListener("click", function(event){
  // Check to see if the event originated at an
  // element we want to handle.
  if(event.target.nodeName === "A" && event.target.classList.contains("XYZ")){
    // Just update the href of the element
    event.target.href = url;
  }
});

<p>Click the links below. Only the XYZ links will take you to example.com</p>
<a href="URL" class="XYZ">XYZ</a>
<a href="URL" class="abc">abc</a>
<a href="URL" class="qrs">qrs</a>
<a href="URL" class="XYZ">XYZ</a>
<a href="URL" class="zzz">zzz</a>
<a href="URL" class="XYZ">XYZ</a>
<a href="URL" class="aaa">aaa</a>
<a href="URL" class="XYZ">XYZ</a>

Javascript 将 HREF 替换为 ONCLICK

Javascript to Replace HREF with ONCLICK

javascript

onclick

location-href