有一段html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code</title>
<body>
<div id="suggestions">
content
<p><a href="/[email protected]&pd=187&name=kljljl">link</a></p>
<p><a href="/[email protected]&pd=187&name=afdsfsa">link</a></p>
</div>
<div id="list">
kklj
<p><a href="/[email protected]&pd=187&name=4fdaf">link1</a></p>
dll
<p><a href="/[email protected]&pd=187&name=afdsf">link2</a></p>
fdf
<p><a href="/[email protected]&pd=187&name=hgfhd">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=ertewt">link4</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=gfdsg">link7</a></p>
fdasf
<p><a href="/[email protected]&pd=187&name=fdsgfgsg">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=cxvbvcb">link8</a></p>
fdsafd
<p><a href="/[email protected]&pd=187&name=ujjhgh">link3</a></p>
</div>
<script>
document.addEventListener('click', function(e){
})
</script>
</html>
我希望能夠在單擊under時獲取當前的email值和pd值。我可以使用 JQuery 輕松獲得它，但我不知道沒有它怎么辦。有任何想法嗎？謝謝你。hrefhreflist
uj5u.com熱心網友回復：
這邊走
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="/[email protected]&pd=187&name=kljljl">link</a></p>
<p><a href="/[email protected]&pd=187&name=afdsfsa">link</a></p>
</div>
<div id="list">
kklj
<p><a href="/[email protected]&pd=187&name=4fdaf">link1</a></p>
dll
<p><a href="/[email protected]&pd=187&name=afdsf">link2</a></p>
fdf
<p><a href="/[email protected]&pd=187&name=hgfhd">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=ertewt">link4</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=gfdsg">link7</a></p>
fdasf
<p><a href="/[email protected]&pd=187&name=fdsgfgsg">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=cxvbvcb">link8</a></p>
fdsafd
<p><a href="/[email protected]&pd=187&name=ujjhgh">link3</a></p>
</div>uj5u.com熱心網友回復：
在這里，我撰寫了一個看起來像 jQuery 但它是純原生 JavaScript 的函式。這是從任何 URL 獲取價值的標準方法。在這里你只需要呼叫這個函式來獲取搜索資料。您可以在此處應用多個事件，例如單擊、滑鼠輸入等
QueryURL('a').on( 'click', response => {
console.log(response)
} )
附件/主要代碼在這里
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="/[email protected]&pd=187&name=kljljl">link</a></p>
<p><a href="/[email protected]&pd=187&name=afdsfsa">link</a></p>
</div>
<div id="list">
kklj
<p><a href="/[email protected]&pd=187&name=4fdaf">link1</a></p>
dll
<p><a href="/[email protected]&pd=187&name=afdsf">link2</a></p>
fdf
<p><a href="/[email protected]&pd=187&name=hgfhd">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=ertewt">link4</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=gfdsg">link7</a></p>
fdasf
<p><a href="/[email protected]&pd=187&name=fdsgfgsg">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=cxvbvcb">link8</a></p>
fdsafd
<p><a href="/[email protected]&pd=187&name=ujjhgh">link3</a></p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/319123.html
標籤：javascript html
上一篇：平滑下拉選單