새 탭에서 조건부로 링크 열기

목표는 확인란을 선택하면 새 탭에서 이러한 링크를 열도록하는 것입니다.새 탭에서 조건부로 링크 열기

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>

출처

2016-10-06 Jlouk

링크를 사용할 수 없게 될 경우를 대비해 코드를 포함하도록 질문을 업데이트하십시오. – MJH

먼저, 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 루프를 인덱스로 대체 할 수 있습니다 (Array#forEach을 사용할 수 없습니다. DOM은 무한한 지혜로 [배열]을 반환하지 않지만, 배열은 개체 인 입니다).

출처

2016-10-06 00:46:14

새 탭에서 조건부로 링크 열기

답변

관련 문제