Hay un fragmento de código html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Code</title> <body> <div id="suggestions"> content <p><a href="/pd?email=1@email.com&pd=187&name=kljljl">link</a></p> <p><a href="/pd?email=6@email.com&pd=187&name=afdsfsa">link</a></p> </div> <div id="list"> kklj <p><a href="/pd?email=10@email.com&pd=187&name=4fdaf">link1</a></p> dll <p><a href="/pd?email=2@email.com&pd=187&name=afdsf">link2</a></p> fdf <p><a href="/pd?email=1@email.com&pd=187&name=hgfhd">link3</a></p> fdsaf <p><a href="/pd?email=4@email.com&pd=187&name=ertewt">link4</a></p> fdsaf <p><a href="/pd?email=5@email.com&pd=187&name=gfdsg">link7</a></p> fdasf <p><a href="/pd?email=8@email.com&pd=187&name=fdsgfgsg">link3</a></p> fdsaf <p><a href="/pd?email=dd@email.com&pd=187&name=cxvbvcb">link8</a></p> fdsafd <p><a href="/pd?email=jh@email.com&pd=187&name=ujjhgh">link3</a></p> </div> <script> document.addEventListener('click', function(e){ }) </script> </html> Quiero poder obtener el valor de email y el valor pd del href actual cuando hago clic en un href debajo de la list . Puedo obtenerlo fácilmente con JQuery, pero no sé cómo prescindir de él. ¿Algunas ideas? Gracias.
Por aquí
const List_els = document.querySelector('#list') List_els.addEventListener('click', function(e) { if (!e.target.matches('a')) return // verify where the click is done e.preventDefault() // disable the href page loading let url = new URL(e.target.href) console.clear() console.log( url.searchParams.get('email')) setTimeout(console.clear,3000) }) p { margin: .1em 0 0 2em ; } <div id="suggestions"> content <p><a href="/pd?email=1@email.com&pd=187&name=kljljl">link</a></p> <p><a href="/pd?email=6@email.com&pd=187&name=afdsfsa">link</a></p> </div> <div id="list"> kklj <p><a href="/pd?email=10@email.com&pd=187&name=4fdaf">link1</a></p> dll <p><a href="/pd?email=2@email.com&pd=187&name=afdsf">link2</a></p> fdf <p><a href="/pd?email=1@email.com&pd=187&name=hgfhd">link3</a></p> fdsaf <p><a href="/pd?email=4@email.com&pd=187&name=ertewt">link4</a></p> fdsaf <p><a href="/pd?email=5@email.com&pd=187&name=gfdsg">link7</a></p> fdasf <p><a href="/pd?email=8@email.com&pd=187&name=fdsgfgsg">link3</a></p> fdsaf <p><a href="/pd?email=dd@email.com&pd=187&name=cxvbvcb">link8</a></p> fdsafd <p><a href="/pd?email=jh@email.com&pd=187&name=ujjhgh">link3</a></p> </div>Aquí he escrito una función que se parece a jQuery pero es JavaScript Vanilla puro. Es la forma estándar de obtener valor de cualquier URL. Aquí solo tiene que llamar a esta función para obtener datos de búsqueda. Puede aplicar múltiples eventos aquí como hacer clic, ingresar con el mouse, etc.
QueryURL('a').on( 'click', response => { console.log(response) } )Adjunto/Código principal está aquí
window.onload = function () { /** * * * Get url query value * @param selector refers to anchor link * */ const QueryURL = selector => { const methods = { element : document.querySelectorAll( selector ), on: function( eventName, callback ) { this.element.forEach( btn => { btn.addEventListener( eventName, ev => { ev.preventDefault(); ev.stopPropagation(); if( ev.target.href ) { const url = new URL(ev.target.href); const searchParams = new URLSearchParams( url.search ); callback( Object.fromEntries(searchParams) ) return false; } }) } ) } } return methods; } /* * ======================================== * Init / Call the function * ======================================== */ QueryURL('a').on( 'click', response => { console.log(response) } ) } <div id="suggestions"> content <p><a href="/pd?email=1@email.com&pd=187&name=kljljl">link</a></p> <p><a href="/pd?email=6@email.com&pd=187&name=afdsfsa">link</a></p> </div> <div id="list"> kklj <p><a href="/pd?email=10@email.com&pd=187&name=4fdaf">link1</a></p> dll <p><a href="/pd?email=2@email.com&pd=187&name=afdsf">link2</a></p> fdf <p><a href="/pd?email=1@email.com&pd=187&name=hgfhd">link3</a></p> fdsaf <p><a href="/pd?email=4@email.com&pd=187&name=ertewt">link4</a></p> fdsaf <p><a href="/pd?email=5@email.com&pd=187&name=gfdsg">link7</a></p> fdasf <p><a href="/pd?email=8@email.com&pd=187&name=fdsgfgsg">link3</a></p> fdsaf <p><a href="/pd?email=dd@email.com&pd=187&name=cxvbvcb">link8</a></p> fdsafd <p><a href="/pd?email=jh@email.com&pd=187&name=ujjhgh">link3</a></p> </div>