在新标签页中有条件地打开链接

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返回一个类似数组的对象...元素的复数应该是一个提示...它不返回单个事物，而是返回事物的集合。

因此，要附加处理程序，您需要像这样循环遍历它们：

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带有索引的常规for循环（您不能使用Array#forEach因为DOM具有无限智慧[咳嗽]不会返回数组，而是返回类似数组的对象）。

在新标签页中有条件地打开链接

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-10-06 00:46:14

在新标签页中有条件地打开链接

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-10-06 00:46:14

解决方案1
0 已采纳 2016-10-06 00:46:14