[英]JavaScript: get href value of multiple <a> tags
Without using jQuery or any other library, the objective is to inform the user which URL will visit with an alert event.在不使用 jQuery 或任何其他库的情况下,目标是通过警报事件通知用户将访问哪个 URL。 In the markup, there are multiple
<a>
tags with different href
values for each, when the user clicks the <a>
tag, an alert
event displays mentioning where the user is going before actually leaving the website.在标记中,有多个
<a>
标签,每个标签具有不同的href
值,当用户单击<a>
标签时,会显示一个alert
事件,提示用户在实际离开网站之前要去哪里。
Workflow:工作流程:
<a>
tag<a>
标记alert
event displays with the href
value of the clicked <a>
tag<a>
标记的href
值的alert
事件显示alert
event, the browser starts loading the href
websitealert
事件,浏览器就会开始加载href
网站Code sample:代码示例:
document.querySelector('a').onclick = function(e) { e.preventDefault(); var href = document.querySelector('a').href; alert('You are going to: ' + href); window.location = href; }
<div id="container"> <a class="link" href="https://www.microsoft.com/">Link A</a> <a class="link" href="https://www.google.com/">Link B</a> <a class="link" href="https://www.apple.com/">Link C</a> </div>
Objective:客观的:
<a>
tags to achieve the workflow output for each one of them (and for any further <a>
tags with the same class
that might be included in the document).<a>
标记动态设置 JavaScript,以实现每个标记的工作流输出(以及可能包含在文档中的具有相同class
的任何其他<a>
标记)。 Please note that only Link A works as desired so far. Your coding to solve this is appreciated!感谢您解决此问题的编码!
Use querySelectorAll()
to get all the anchor tags, then loop through them and addEventListener()
instead of onclick
, because onclick
can only be assigned to one element at a time.使用
querySelectorAll()
获取所有锚标签,然后遍历它们并addEventListener()
而不是onclick
,因为onclick
一次只能分配给一个元素。 Also, you can grab the href with e.target.href
.此外,您可以使用
e.target.href
获取 href。 e.target
is the element that was acted upon to start the event. e.target
是用于启动事件的元素。
document.querySelectorAll('a').forEach(function(el) { el.addEventListener("click", function(e) { if (e.target.matches('.link')) { e.preventDefault(); var href = e.target.href; alert('You are going to: ' + href); //window.location = href; } }) })
<div id="container"> <a class="link" href="https://www.microsoft.com/">Link A</a> <a class="link" href="https://www.google.com/">Link B</a> <a class="link" href="https://www.apple.com/">Link C</a> </div>
querySelector
will only match the first element that matches the selector. querySelector
只会匹配匹配选择器的第一个元素。 You can either use querySelectorAll
to match all of those elements, add listeners to all of them...您可以使用
querySelectorAll
来匹配所有这些元素,向所有这些元素添加侦听器......
OR或者
Attach one listener to the container ( event delegation allows it to capture events from its children as they "bubble up" the DOM).将一个侦听器附加到容器(事件委托允许它在其子级“冒泡”DOM 时捕获事件)。 When a child element is clicked the handler function checks that its an anchor with a
.link
class, and then executes the rest of the code.单击子元素时,处理函数会检查其是否为具有
.link
类的锚点,然后执行其余代码。
const container = document.querySelector('#container'); container.addEventListener('click', handleClick); function handleClick(e) { if (e.target.matches('.link')) { e.preventDefault(); const { href } = e.target; alert(`You are going to: ${href}`); window.location = href; } }
<div id="container"> <a class="link" href="https://www.microsoft.com/">Link A</a> <a class="link" href="https://www.google.com/">Link B</a> <a class="link" href="https://www.apple.com/">Link C</a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.