Question

我想更改.btn_view类拥有的页面上的每个链接

我在页面上的链接就像：

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>
...

进入

<a class="btn_view" href="viewer.html?file=/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="viewer.html?file=/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="viewer.html?file=/download/documentC.pdf">VIEW</a>
...

我正在处理这段代码，但是我无法弄清楚问题所在：

const items = document.getElementsByClassName(".btn_view");

items.addEventListener('click', (e) => {
  for (var i = 0; i < items.length; i++) //Loop through your elements
    {
        //Verify that the href starts with /download/
        if (items[i].href.indexOf("/download/") === 0)
        {
            // add viewer link in front of original url
            items[i].href = "viewer.html?file=" + items[i].href
            //If it does, open that URL in a new window.
            window.open(items[i].href, "_blank");
        }
    }
});

Answer 1

如果您真的想使用事件监听器进行操作：

const items = document.getElementsByClassName("btn_view");

Array.from(items).forEach(item => item.addEventListener('click', (e) => {
  let href = item.href.replace(location.origin, "");
  if(href.indexOf("/download/") === 0) {
    e.preventDefault();
    window.open( "viewer.html?file=" + href, "_blank");
  }
}));

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>

但是我建议这样做：

const items = document.getElementsByClassName("btn_view");

Array.from(items).forEach(item => {
  let href = item.href.replace(location.origin, "");
  if(href.indexOf("/download/") === 0) {
    item.href = "viewer.html?file=" + href;
  }
});

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>

在这种情况下，链接是静态的，您不需要处理事件

Answer 2

第一个问题是您在此处使用class选择器：

const items = document.getElementsByClassName(".btn_view");

这不会产生class的{{1}}标签。您将需要：

btn_view

或

const items = document.getElementsByClassName("btn_view");

第二个问题是，即使const items = document.querySelectorAll(".btn_view");返回一个内部包含DOM元素的类似数组的对象，您仍打算为其所有getElementsByClassName定义一个事件处理程序，而不是将其分配给{ {1}}，则将其分配给items的容器。所以：

items

Answer 3

您为什么要在events上进行更改，只需遍历并更改即可。

function modifyLink(){
var items = document.getElementsByClassName("btn_view");
for(var i=0;i<items.length;i++){
 let href = items[i].getAttribute("href");
 console.log(href);
 items[i].setAttribute('href','viewer.html?file='+href);
 
}
for(var i=0;i<items.length;i++){
 console.log(items[i].getAttribute("href"));
}
}

modifyLink();

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>

Answer 4

设置事件侦听器的方法不起作用。如果要在单击链接后运行代码，则还需要调用preventdefault。使用getElementsByClassName时，不需要在前面加上“。”。要么。您还应该使用getAttribute（）而不是.href：

const items = document.getElementsByClassName("btn_view");

for (var item of items) {

  item.addEventListener('click', (e) => {
    e.preventDefault()
    if (e.target.getAttribute("href").indexOf('/download/') === 0) {
      e.target.href = "viewer.html?file=" + e.target.getAttribute('href')
    }
    window.open(e.target.href, "_blank");
  })
}

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>

不过，您不必使用事件侦听器。以下代码将在以类/downloads/和btn_view开头的所有链接之前加上您的字符串：

const items = document.getElementsByClassName("btn_view");

for (var item of items) {
    if (item.getAttribute("href").indexOf('/download/') === 0) {
      item.href = "viewer.html?file=" + item.getAttribute('href')
    }
}

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>

使用javascript修改页面上的一些href链接

4 个答案: