用 ONCLICK 替换 HREF 的 Javascript答案

【问题标题】：Javascript to Replace HREF with ONCLICK用 ONCLICK 替换 HREF 的 Javascript
【发布时间】：2020-07-01 06:31:21
【问题描述】：

我是 Javascript 新手，需要一些帮助来创建一个脚本，该脚本在页面加载时将“onclick”添加到 HTML 页面上特定类的 href 链接 - 使用链接的 href URL，而不接触内联代码.该脚本将从此修改常规链接

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

到这里：

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

每个链接的 URL 都会更改，但类保持不变。这是我到目前为止得到的，但我想知道是否可以改进：

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', '#');

}

【问题讨论】：

请用您的 JS 代码段更新您的问题，向我们展示您自己解决此问题的最佳尝试，并说明您在什么时候遇到问题。
很好奇为什么你认为你需要这样做。当用户单击链接时，最终结果将是浏览器中完全相同的行为
为什么不直接更改特定类的链接的href？
您好，我需要这个来强制为我的 Wordpress LMS 的标签式导航重新加载页面。这是为了避免当页面从缓存而不是服务器加载时，Wordpress 原生短代码无法正确显示。 onclick 会强制从服务器刷新页面。

标签： javascript onclick location-href

【解决方案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 的新手：如果您的问题有一个有用的答案，您可以将其标记为已接受。仅当您愿意时才有意义。不一定是我的。

【讨论】：

我使用document.querySelectorAll 而不是document.getElementsByClassName 来确保它是一个可以提供href 属性的链接(a)。比a.XYZ 更好的选择器是a.XYZ[href]。见CSS Selector Reference
更好的是，使用事件委托并只创建一个事件处理程序。

【解决方案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();

【讨论】：

更好的是，使用事件委托并只创建一个事件处理程序。
谢谢帕夫洛斯！您的代码有效，但适用于所有链接 - 我只需要修改页面上的一类链接。
将 querySelectorAll("a") 更改为 querySelectorAll(".your-class-name") 在您的情况下是 querySelectorAll(".XYZ") ？确保有一个“。”表示班级。
谢谢你，帕夫洛斯！

【解决方案3】：

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

并且，要以最简单的方式执行此操作，请使用 event delegation，我们利用事件从其起源冒泡到 document 的事实。我们只需在所有相关元素的共同祖先上创建一个事件处理程序，并在那里处理。当我们这样做时，我们会使用 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>

【讨论】：

正如我在上面的评论中指出的那样，每次单击链接时我都需要强制刷新页面（由于 Wordpress 插件的一些问题） - 所以“onclick”可以解决问题。这可能不是最好的解决方案，但我知道。感谢您的建议。

【解决方案4】：

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

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

然后只需在您的链接中添加一个“id”。或者获取类而不是 id。

【讨论】：

ids 使代码变得脆弱和臃肿。此外，您可以直接设置元素的 .href 属性，而不是 setAttribute()（确实有效）。

【解决方案5】：

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

试试这个..

为了页面加载后的效果，在你的正文标签的最后添加脚本

【讨论】：

No, no, no, no, no!