Question

我的目标是，如果勾选了复选框，则会在新标签中打开这些链接。

如果我将getElementByID更改为getElementsByClassName，为什么我的anchor.getAttribute不是函数？

<!DOCTYPE html>
<html> 
    <head> </head>
    <title> </title>
    <body>
        <input id="checkr" type="checkbox">Open in New Window</input>
        <br />
        <a href="http://www.google.com" class="linker">Google</a> <br>
        <a href="http://www.w3schools.com" class="linker">W3 Schools</a> <br>
        <a href="http://www.twitch.tv" class="linker">Twitch</a> <br>

        <script>
            var checkr = document.getElementById('checkr');
            var anchor = document.getElementsByClassName('linker');
            var link = anchor.getAttribute('href');

            function OpenWindow(href) {
                if (checkr.checked) {
                    window.open(href, '_blank');
                } else {
                    window.open(href, '_self');
                }
            }
            anchor.onclick = function() {
                OpenWindow(link);
                return false;
            };
        </script>
    </body>
</html>

Answer 1

首先，getElementsByClassName返回一个类似数组的对象...元素 s 复数应该是一个线索...它没有返回一个单个的东西，它返回了集合的东西。

所以要附加你的处理程序，你需要像这样循环它们：

const linkers = document.getElementsByClassName('linker');
for(const linker of linkers) {
  linker.addEventListener('click', function(evt) {
    // this is your click event listener
  });
}

其次，你试图获得主播的方式是不行的，因为你在谈论哪个主播？最好的方法是让事件本身告诉你点击了什么锚点，它通过它target属性做了什么：

const linkers = document.getElementsByClassName('linker');
for(const linker of linkers) {
  linker.addEventListener('click', function(evt) {
    const href = evt.target.attributes['href'].value;
  });
}

由于您不希望发生默认行为，请致电evt.preventDefault()：

const linkers = document.getElementsByClassName('linker');
for(const linker of linkers) {
  linker.addEventListener('click', function(evt) {
    evt.preventDefault();
    const href = evt.target.attributes['href'].value;
  });
}

然后最后你可以获得复选框的值并采取适当的行动：

const linkers = document.getElementsByClassName('linker');
for(const linker of linkers) {
  linker.addEventListener('click', function(evt) {
    evt.preventDefault();
    const href = evt.target.attributes['href'].value;
    const newWindow = document.getElementById('checkr').checked;
    window.open(href, newWindow ? '_blank' : '_self');
  });
}

请注意，我使用for...of循环，这可能在古老的浏览器中无法使用。如果这是一个问题，你可以用带索引的常规for循环替换它们（你不能使用Array#forEach，因为DOM，它的无限智慧[咳嗽]并没有。 t返回数组，但是类似数组的对象。）

在新选项卡中有条件地打开链接

1 个答案: