用ONCLICK替换HREF的Javascript

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

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

}

---

这里有一种使用；如果需要，您可以更改：

//遍历css选择器的所有结果 用于文档的let链接。queryselectoral'a.XYZ'{ //将onclick属性设置为文本 link.setAttribute'onclick'，'location.href='+JSON.stringifylink.href+'；'； //将href属性设置为空锚点 link.href=； }

---

将其放入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();

试试这个

---

对于页面加载后的效果，请在正文标记的末尾添加脚本

如果我理解您的问题，我想您需要这样的内容：

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

---

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

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

要以最简单的方式实现这一点，请使用，我们可以利用事件从其起源到文档的事实。我们只需在所有相关元素的共同祖先上创建一个事件处理程序，并在那里处理事件。当我们这样做时，我们检查事件是否起源于我们关心使用的元素，如果是，我们会相应地采取行动

下面是一个例子：

让url=https://example.com; //在文档本身上设置事件侦听器 document.addEventListener单击，函数事件{ //检查事件是否起源于 //我们要处理的元素。 ifevent.target.nodeName==A&&event.target.classList.containsXYZ{ //只需更新元素的href event.target.href=url； } }; 单击下面的链接。只有XYZ链接才能将您带到example.com

---

请用JS代码段更新您的问题，向我们展示您自己解决问题的最佳尝试，并解释您在什么时候遇到问题。好奇您为什么认为需要这样做。当用户单击链接时，最终结果将与浏览器中的行为完全相同。为什么不更改具有特定类的链接的href？您好，我需要它来强制重新加载我的Wordpress LMS的选项卡式导航页面。这是为了避免从缓存而不是服务器加载页面时Wordpress本机短代码无法正确显示。onclick强制从服务器刷新页面。我使用document.querySelectorAll而不是document.getElementsByClassName来确保它是可以提供href属性的链接。比A.XYZ更好的选择器是A.XYZ[href]。更好的方法是使用事件委派，只创建一个事件处理程序。更好的方法是使用事件委派，只创建一个事件处理程序。谢谢你！您的代码可以工作，但对于所有链接-我只需要修改页面上的一类链接。将querySelectorAll更改为querySelectorAll.Your-class-name，在您的情况下，是querySelectorAll.XYZ？确保有一个安全的地方。代表班级。谢谢你，帕夫洛斯！ID使代码变得脆弱和臃肿。另外，您可以直接设置元素的.href属性，而不是setAttribute。正如我在上面的评论中指出的，由于Wordpress插件出现问题，每次单击链接时，我都需要强制刷新页面，所以“onclick”就可以做到这一点。这也许不是最好的解决办法，但却是我知道的。谢谢你的建议。

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